解决给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 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
深入理解javascript变量声明
Nov 20 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP比你想象的好得多
2014/11/27 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
javascript实现日历效果
2019/06/17 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
Python实现截屏的函数
2015/07/25 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
import的本质解析
2017/10/30 Python
Python实现分段线性插值
2018/12/17 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python爬虫可以爬什么
2020/06/16 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
就业协议书的作用
2014/04/11 职场文书
大二学生自我检讨书
2014/10/23 职场文书
优秀党员个人总结
2015/02/14 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL