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 01 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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+mysql查询优化简单实例
2015/01/13 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
浅析node.js中close事件
2014/11/26 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python守护进程和脚本单例运行详解
2017/01/06 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
2014春晚主持词
2014/03/25 职场文书
财务工作失职检讨书
2014/11/21 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
休学证明范本
2015/06/19 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书