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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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的header和asp中的redirect比较
2006/10/09 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
laravel5.6实现数值转换
2019/10/23 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
Python实现把数字转换成中文
2015/06/29 Python
12步教你理解Python装饰器
2016/02/25 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python正则表达式和元字符详解
2018/11/29 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python Process多进程实现过程
2019/10/22 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书