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压缩工具下载集合
Mar 06 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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 Undefined index报错的修复方法
2011/07/17 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
pymysql的简单封装代码实例
2020/01/08 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
《大海那边》教学反思
2014/04/09 职场文书
项目投资合作意向书
2014/07/29 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
新员工考核评语
2014/12/31 职场文书
个人思想政治总结
2015/03/05 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
python实现简单的三子棋游戏
2022/04/28 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers