JS动态添加元素后，绑定事件不起作用失效问题 原因与解决方法

今天我在做如何在评论那里点击回复按钮，下面就自动显示一个回复框？功能的时候，结果出现js动态先删除元素再创建元素后，绑定事件不生效的问题。

通俗点讲就是：

我直接评论，绑定事件是生效的，没有任何的问题。

当我点击“回复”按钮，也会出现一个回复框，当我在回复框输入内容评论后，绑定onclick事件，提交评论的时候就绑定事件就失效了。

绑定事件失效，不起作用的原因：

1、onclick事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了。

2、同样，当你使用类似于：var aa = document.getElementsByTagName("动态生成的元素"); 来获取动态生成的元素的时候也是获取不到的，因为网页只会执行一次初始化绑定，之后动态生成的dom元素也是监测不到的。

由于我的“评论点击回复按钮出现回复框”也是JS做的，点击回复按钮后，会先删除评论框与回复框，然后再添加一个回复框。

因此新增加的回复框元素是监测不到的，自然给任何的绑定事件也是无效不起作用的。

我的HTML代码示例如下：

        <div class="col-12" id="comment" style="background-color: white;margin-bottom: 20px;">
            <div class="comment_textarea_editor"> <!-- 整个DIV都是评论框或回复框代码，到时候通过点击事件JS会动态删除或添加的元素就是这整个DIV -->
                <h3>发表评论</h3>
                <!-- 整个表单代码，button按钮就是在这里面 -->
                <!-- 可参考：<button type="button" id="comment_submit" class="btn btn-primary">提交评论</button> -->
            </div>
        </div>

JS代码我就不放出来了，大家懂原理以及整个逻辑思维就可以了。讲到这里，稍微有点JS基础的朋友们，相信你们是可以看懂的，如真不懂可以来问我。

解决方法

知道了原因，解决起来就容易多了，以上那个问题，肯定是有解决方案的。我这里就教大家用最常用的方法“事件委托”来解决。

第一种方法：jQuery事件委托

   $('#comment').on('click','button',function(){
       var type = $(this).attr('type');
        alert(type);
    });

以上代码大概的意思就是：

先给已存在的DOM元素id="comment"绑定onclick事件，也就是button的父级，利用事件委托实现dom事件绑定。

注意：

1、要确保 id="comment"  这个元素不是新添加的，必须保证是网页第一次初始化就已经存在的。

2、要确保 id="comment" 是 “button”的父级。button可以换成其它标签，例如：li，由于我这里是评论回复，需要表单提交，因此我用了“button”按钮。

第二种方法：JavaScript事件委托

 document.getElementById('comment').addEventListener('click', function (e) {
        // 兼容性处理
        var event = e || window.event;
        var target = event.target || event.srcElement;
        //alert(111);
        console.log(target.nodeName);
        //alert(target.nodeName.toLocaleLowerCase);
        // 判断是否匹配目标元素
        //if (target.nodeName.toLocaleLowerCase === 'BUTTON') {
        if (target.nodeName === 'BUTTON') {
            console.log('BUTTON', target.innerHTML);
        }
    });