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 学习之旅 (3)
Feb 05 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
如何用itertools解决无序排列组合的问题
2017/05/18 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python __slots__的使用方法
2020/11/15 Python
python3中编码获取网页的实例方法
2020/11/16 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
承认错误的检讨书
2014/01/30 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
农业生产宣传标语
2014/10/08 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
python turtle绘图命令及案例
2021/11/23 Python