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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
js+html制作简单验证码
Feb 16 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
详解vue 图片上传功能
Apr 30 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Django操作session 的方法
2020/03/09 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
兼职学生的自我评价
2013/11/24 职场文书
消防志愿者活动方案
2014/08/23 职场文书
2014年质量工作总结
2014/11/22 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
Python学习之迭代器详解
2022/04/01 Python