分析DOM绑定click事件无效及解决办法

Click

在项目中我们经常会遇到给DOM元素绑定click事件无效的问题，在此记录一下我所遇到的原因及解决办法。同时也加深对js事件处理机制（事件冒泡、事件捕获）的理解。

1.事件在某处被解绑

对DOM事件解绑一般不会导致click失效，但是在以下的情况，click事件会失效：

$(function(){
    $("#btn").unbind();
})
$("#btn").click(function(){
    //...
});

由于$(function(){})是DOM元素加载完毕后执行的函数，因此函数外部的绑定click事件函数先与$(function(){})执行，在DOM元素加载完毕后对.button元素的监听事件进行解绑，所以点击事件失效，如果需要解绑事件，可以这样写：

$(function(){
    $("#btn").unbind();
    $("#btn").click(function(){
        alert("点击了我！");
    });
})

2.DOM元素是js动态加载、绑定事件的js文件是通过ajax异步加载的

这种情况DOM元素加载出来都需要一定的等待时间，在等待时间前对DOM元素添加事件是无效的。解决办法有两种：

1. 延迟DOM事件的添加时间

$(function(){
    setTimeout(function(){
        $("#btn").click(function(){
            //...
        });
    },500)
})

2. 事件委托（事件代理）给父元素

$(function(){
    $(".parent").on("click","#btn",function(){
        //...
    });
})

3.ajax异步加载的DOM元素

当需要用ajax载入某部分的html文件时，点击事件也会失效：一、可以在ajax执行成功的回调函数done()中添加事件；二、可以参照2中事件委托的方法。

4.点击a元素链接无跳转

这种情况可能有代码阻止了元素的默认行为导致无法跳转。

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

对事件进行解绑即可：

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

最后小结一下，涉及知识：事件绑定、事件监听、事件捕获、事件冒泡、事件代理（委托）、js执行顺序。