【小顿顿记录】js使用append追加的节点无法添加事件_js append 拼接的jsp class不生效-优快云博客

本文解决了一个常见问题：使用JavaScript的append方法添加的DOM元素无法直接绑定事件。通过使用.on()方法，可以有效地为动态生成的元素绑定事件监听器。

一个月一来一直忙碌着工作，工作中也遇到了很多问题，没有时间及时的整理出来，今天统一整理一下，做个记录，也是给正在踩坑的你一个参考。进入正题...

我不是专业的前端人员，所以在写前端页面的时候会遇到很多问题，其中一个问题是，js使用append追加的节点无法添加事件。直接上代码吧。

html页面：

 <ul class="sewvbm"></ul>

给ul里面追加li :

//ul追加节点
$('.sewvbm').append('<li>近一周</li><li>三个月</li><li>半年</li><li>一年</li><li>两年</li>');
//节点点击触发事件
$(".sewvbm>li").click(function(){
    var selva=$(this).text();
    alert(selva);
});

那么问题来了，点击节点时并不触发事件。原因是：append中的节点是页面加载完成才会追加的，页面并不会为未来的节点添加点击事件。因此就需要为所有的追加的节点添加点击事件，具体的方法如下：

$('.sewvbm').on('click','li',function() {
    var selva=$(this).text();
    alert(selva);
});