脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → dom click

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

 更新时间：2017年02月17日 09:08:50   作者：zengnificant  
本文主要介绍了解决给dom元素绑定click等事件无效问题的方法。具有很好的参考价值，下面跟着小编一起来看下吧

之前一直遇到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执行顺序

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现面向对象继承的5种方式分析

    JS实现面向对象继承的5种方式分析

    这篇文章主要介绍了JS实现面向对象继承的5种方式,结合实例形式分析了JavaScript面向对象继承功能的5种常见实现方法原理与操作技巧,需要的朋友可以参考下
    2018-07-07
  • Javascript 阻止javascript事件冒泡，获取控件ID值

    Javascript 阻止javascript事件冒泡，获取控件ID值

    Javascript学习日记-阻止javascript事件冒泡，获取控件ID值
    2009-06-06
  • javascript DOM实用学习资料

    javascript DOM实用学习资料

    比较详细的实例分析了dom的一些常用方法
    2008-09-09
  • 代码整洁之道(重构)

    代码整洁之道(重构)

    这篇文章主要介绍了代码整洁之道(重构)，不管对于何种语言，重构都是软件开发过程中不可或缺的一部分，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JavaScript实现格式化字符串函数String.format

    JavaScript实现格式化字符串函数String.format

    本文主要介绍了JavaScript实现格式化字符串函数String.format（可自动解析引号转义字符）。具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • 详解JavaScript如何准确获取任意变量的数据类型

    详解JavaScript如何准确获取任意变量的数据类型

    js是弱类型语言，或者说是动态语言，在定义变量时我们可以不提前声明变量的类型，也可以在变量声明后赋予不同类型的值。所以本文为大家详解一下JavaScript如何准确获取任意变量的数据类型，需要的可以参考一下
    2022-06-06
  • JavaScript获取地址栏参数的方法实现

    JavaScript获取地址栏参数的方法实现

    这篇文章主要给大家介绍了关于JavaScript获取地址栏参数的方法实现,项目中经常遇到获取上个页面跳转过来获取当前的参数,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • Javascript HTML5 Canvas实现的一个画板

    Javascript HTML5 Canvas实现的一个画板

    这篇文章主要为大家详细介绍了Javascript HTML5 Canvas实现的一个画板的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JS数字抽奖游戏实现方法

    JS数字抽奖游戏实现方法

    这篇文章主要介绍了JS数字抽奖游戏实现方法,可实现按下回车键出现随机数字切换的效果,涉及时间与随机数的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 微信小程序用户拒绝授权的处理方法详解

    微信小程序用户拒绝授权的处理方法详解

    这篇文章主要介绍了微信小程序用户拒绝授权的处理方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09

最新评论