动态生成的标签绑定事件只能用一次的问题

Posted 2020-10-25 hibiki

在写一个待办事项项目时遇到一个问题。

原因

to-do list 里每一条任务都是动态的，在js里事先绑定好的点击事件会因为某一条任务的删除而失效，使得新添加的条目没有绑定点击事件，所以在使用中只能响应一次点击事件。

解决方法

可以使用事件代理的方法

 1 var list = $(".list");
 2 list.on("click", ".clear", function() { //为完成和删除按钮绑定事件
 3     var nowClickIndex = $(this).parent().find("i").text();
 4     deleteLS(who, nowClickIndex);
 5     appendToDOM(who);
 6 });
 7 /*****
 8  * 遇到的问题:
 9  * 绑定的事件只执行1次
10  * 原因:
11  * 使用的是$(".list-item").on("click", ".clear", function ()...
12  * 在dom重载后,$(".list-item")已经是新的了,原来的$(".list-item")消失,绑定的事件也随之消失
13  * 解决方法:
14  * $(".list-item")的父级元素没重载,用$(".list").on("click", ".clear", function ()...
15  * ******/