Biegral Blog

前言

首先，简单说一下事件委托：事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。
阅读以下内容之前，请先了解事件委托，自行百度或请戳这里，这里不做细说。

开门见山，这个导致事件委托触发事件失败的一个问题的原因就是利用事件委托绑定事件时的父元素或祖先元素不存在。
看完这里，很多人上来就想给我两巴掌说：这不是废话吗？！父节点不存在绑定个屁啊。
对此请往下看。
先上一张图：

再上事件绑定的代码：

            //注：这里使用的是1.7以上版本的jQuery
            //因为在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live().
            $('.btn-group-1').on('click',function(){
                alert('按钮1');
            });

倘若你有心看到这里，你可能会觉得这样按钮组1中的按钮1触发点击事件是绝对没问题的。
其实不然，在这里是失效的，现在且看完整js代码你就会明白。

        $(document).ready(function(){
            //按钮是利用ajax动态请求生成的
            $.ajax({
                url:'./demo.json',
                type:'GET',
                success:function(data){
                    $(document.body).html(data[0]);
                }
            });
            //当进行事件绑定的时候，$('btn-group-1')还不存在
            //导致触发事件失败
            $('.btn-group-1').on('click',function(){
                alert('按钮1');//触发事件失败
            });
        });

这时有人也许会有人理所当然的认为，这是一个异步的问题，其实并不是，看了下面的代码你就会明白。

        $(document).ready(function(){
            $.ajax({
                url:'./demo.json',
                type:'GET',
                success:function(data){
                    $(document.body).html(data[0]);
                }
            });
            //将事件绑定的父节点换成了$(document)
            $(document).on('click','.btn-group-1',function(){
                alert('按钮1');//触发事件成功
            });
        });

显而易见，将事件绑定的父节点由$(‘.btn-group-1’)换成了$(document)这个已经存在的父节点，事件就可以成功触发了，很显然异步有影响，但不是根本原因。

这在代码量小的时候不容易出现，当在做大型项目的时候，动态生成这段代码老早以前就已经写好了，现在你想利用事件委托给按钮组1中的每个按钮加个点击事件，打开F12,看了下dom结构，找到了父节点$(‘btn-group-1’)，代码写起，你不担心这里面的每个按钮是不是已经存在的，因为你知道事件委托的优点，为后来添加的按钮也会绑定此事件，然而你忽略的是你所绑定的父节点也是后来动态添加的，执行绑定代码的时候根本不存在！当问题出现的时候，你会觉得很诡异。

这是我总结出当时我遇到的这个问题的原因，啰嗦了半天，也许有人会和我一样遇到同样的问题，在这里分享给大家，绑定事件，当事件触发失败时，然而代码又写的没问题时，可以从这个方向找找原因。