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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
vue组件间通信解析
Mar 01 Javascript
深入研究React中setState源码
Nov 17 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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中的CMS的涵义
2007/03/11 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
php-msf源码详解
2017/12/25 PHP
js局部刷新页面时间具体实现
2013/07/04 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python实战教程之自动扫雷
2018/07/13 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
django实现支付宝支付实例讲解
2019/10/17 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python实现canny边缘检测
2020/09/14 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
利用python爬取有道词典的方法
2020/12/08 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
军训的自我鉴定
2013/12/10 职场文书
廉政教育心得体会
2014/01/01 职场文书
物理课外活动总结
2014/08/27 职场文书
私人委托书格式
2014/09/10 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
什么是SOLID
2022/03/24 Javascript