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 相关文章推荐
jQuery代码优化之基本事件
Nov 01 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
JavaScript小技巧整理
Dec 30 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue多选列表组件深入详解
Mar 02 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
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
validator验证控件使用代码
2010/11/23 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python对切片命名的实现方法
2018/10/16 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
软件测试面试题
2014/01/05 面试题
建筑个人求职信范文
2014/01/25 职场文书
小区门卫管理制度
2014/01/29 职场文书
纠风工作实施方案
2014/03/15 职场文书
《画家乡》教学反思
2014/04/22 职场文书
青春无悔演讲稿
2014/05/08 职场文书
寻找成龙观后感
2015/06/12 职场文书
教育教学读书笔记
2015/07/02 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server