jQuery中$.click()无效问题分析


Posted in Javascript onJanuary 29, 2015

今天做表格前台导出到xls时,想自动触发a的点击。但失败。最后找到这个文件。

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

先看下边的代码:

 <html>

<head>磨途歌-A标签测试1<head>

<body>

   <a href="http://blog.mo2g.com">磨途歌<a>

</body>

</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script>

<script>

jQuery(function($) {

  //给所有A标签绑定点击触发事件

  $('a').click(function() {

    alert(1);

  });

  //触发所有A标签的点击事件

  $('a').click();

});

</script>

  上边的代码确实已经触发了点击A标签事件,但大家一定也会有疑问,为什么点击了A标签,却不触发A标签的跳转事件?

一开始还以为是浏览器做了相应的安全措施,屏蔽了JS对A标签的操作,后来发现,并不是这样的,接下来就说说其中的原委。

在开始解释前,我先抛出一个问题。在我们点击“A标签”的时候,究竟是点击了什么才发生的跳转?

1)点击的是“A标签”本身?

2)点击的是“A标签”中显示的文字?

说到这里,大家应该明白了,我们上边的代码已经证实了点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都是点击的A标签中的文字了?

既然有了头绪,那么就来动手试试。

 <html>

<head>磨途歌-A标签测试2<head>

<body>

   <a href="http://www.mo2g.com">磨途歌<a>

</body>

</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script>

<script>

jQuery(function($) {

  var mo2g = '<span id="mo2g">磨延城<span>';

  //给A标签中的文字添加一个能被jQuery捕获的元素

  $('a').append(mo2g);

  //模拟点击A标签中的文字

  $('#mo2g').click();

});

</script>

这下效果出来了,事实证明了上述的推断是正确的,所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用JS模拟点击该元素即可。

以上就是本文讲诉的相关jQuery中$("a").click()无效问题的分析了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
分享Javascript实用方法二
Dec 13 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 #Javascript
js操作滚动条事件实例
Jan 29 #Javascript
jQuery调取jSon数据并展示的方法
Jan 29 #Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 #Javascript
浅谈Javascript 数组与字典
Jan 29 #Javascript
javascript 数组操作详解
Jan 29 #Javascript
jQuery实现流动虚线框的方法
Jan 29 #Javascript
You might like
php使用curl获取https请求的方法
2015/02/11 PHP
php封装一个异常的处理类
2017/06/08 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
chrome原生方法之数组
2011/11/30 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python查看微信撤回消息代码
2018/06/07 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python连接mongodb集群方法详解
2020/02/13 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
校园歌手大赛策划书
2014/01/17 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
环保倡议书范文
2014/05/12 职场文书
基层党员对照检查材料
2014/09/24 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
PHP实现两种排课方式
2021/06/26 PHP