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);
        }
    });
    A+
发布日期:2021年07月26日 19:59:31  所属分类:JavaScript
最后更新时间:2021-07-26 20:12:07
付杰
  • ¥ 15元
  • 市场价:15元
  • ¥ 199.0元
  • 市场价:199.0元
  • ¥ 99.0元
  • 市场价:129.0元
  • ¥ 129.0元
  • 市场价:199.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: