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 mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
js 轮播效果实例分享
Dec 28 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
layui实现三级导航菜单
Jul 26 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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数字转汉字代码(算法)
2011/10/08 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
详解Vue3中对VDOM的改进
2020/04/23 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python对象体系深入分析
2014/10/28 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
12月红领巾广播稿
2014/02/13 职场文书
小学家长学校培训材料
2014/08/24 职场文书
学前教育专业求职信
2014/09/02 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
爱国教育主题班会
2015/08/14 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python