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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
详解vue axios二次封装
Jul 22 Javascript
js实现简单选项卡功能
Mar 23 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
layui多图上传实现删除功能的例子
Sep 23 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
我的论坛源代码(一)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP引用的调用方法分析
2016/04/25 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
js登录弹出层特效
2014/03/07 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python安装whl文件过程图解
2020/02/18 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
审核会计岗位职责
2013/11/08 职场文书
文案策划求职信
2014/03/18 职场文书
2014年干部作风建设总结
2014/10/23 职场文书