【小顿顿记录】js使用append追加的节点无法添加事件

本文解决了一个常见问题:使用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);
});

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值