解决给dom元素绑定click等事件无效问题的方法


Posted in Javascript onFebruary 17, 2017

之前一直遇到js插件生成的元素,click事件无效的问题,重新绑定也不行,终于找到解决方法,在此记下来。

同时加深对js事件处理机制的理解。

1. 事件被解绑

这种情况下一般不会导致click失效,但以下情况,click事件就失效了:

$(function(){
 $('.btn').unbind()
})
$('.btn').click(function(){
 //...
 })

所以,click事件要有个好习惯:

$(function(){
 $('.btn').click(function(){
 //...
 })
})

2. js插件异步/动态加载dom

一般含有等待时间/开始运行时间:WaitTime

此时直接绑定/监听无效:

$(function(){
 $('.container .btn').on('click',function(){
 //...
 })
})

解决方法1:

$(function(){
 setTimeout(function{ 
 $('.container .btn').click(function(){
  //...
  })
 //.btn 加载后事件 
 },WaitTime) 
})

解决方法2(事件委托,即委托给父元素):

$(function(){
 $('.container').on('click','.btn',function(){
 //...
 })
})

3. ajax 异步加载的dom

  • 可以在done()函数体中加click事件
  • 同2中的事件委托方法。

4. 点击链接无反应

以下代码会导致a标签有href也无法跳转

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
})

解决方法:

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
 $('a').unbind()
})

小结

1.事件绑定,事件监听,事件委托 相关链接

2.事件捕获与冒泡 相关链接

target.addEventListener(type, listener[, options]);
 target.addEventListener(type, listener[, useCapture]);

事件捕获

父元素先发生,子元素后

事件冒泡

子元素先发生,父元素后

3.javascript执行顺序

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
Vue.js原理分析之observer模块详解
Feb 17 #Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 #Javascript
Bootstrap表单使用方法详解
Feb 17 #Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 #Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 #Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 #Javascript
数组Array的排序sort方法
Feb 17 #Javascript
You might like
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
jquery 选择器部分整理
2009/10/28 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python 爬虫的原理
2020/07/30 Python
局域网定义和特性
2016/01/23 面试题
公司员工的自我评价范例
2013/11/01 职场文书
学习党代会心得体会
2014/09/05 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL