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 写类方式之四
Jul 05 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
js实现tab切换效果
Feb 16 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
vue中nextTick用法实例
Sep 11 Javascript
如何制作自己的原生JavaScript路由
May 05 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python如何输出反斜杠
2020/06/18 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
Vrbo英国:预订度假屋
2020/08/19 全球购物
商场总经理岗位职责
2014/02/03 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
交通事故私了协议书
2014/04/16 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
计划生育宣传标语
2014/06/21 职场文书
作风建设剖析材料
2014/10/06 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2015年司法局工作总结
2015/05/22 职场文书
建国大业观后感600字
2015/06/01 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
MySQL 条件查询的常用操作
2022/04/28 MySQL