重新添加项目的jQuery类更改[重复]答案

【问题标题】：jQuery class changer for readded items [duplicate]重新添加项目的jQuery类更改[重复]
【发布时间】：2015-04-17 10:15:43
【问题描述】：

我应该创建一些清单。

如果用户点击某个任务（在本例中为<li>），该任务应该会消失并被删除。我通过切换 jQuery 类解决了这个问题：

$('li').click(function() {
   $(this).toggleClass("checked unchecked");
});

一切正常。如果用户单击列表项，则类从“unchecked”变为“checked”。

但是有一个添加新任务的选项（上面的小加号图标）。如果您添加新的列表项，则类更改器对此不起作用。如果你点击它，什么都不会发生。

希望你们能理解我，我的英语不是很好:-)

【问题讨论】：

【解决方案1】：

这是因为当您将click 处理程序绑定到<li> 元素时，新的动态创建的项目不存在。要解决此问题，您可以使用 事件委托 和 on 方法：

$('.todo-list').on('click', 'li', function() {
    $(this).toggleClass('checked unchecked');
});

这里.todo-list是<li>元素的静态父元素。

【讨论】：

【解决方案2】：

您需要使用事件委托将事件附加到动态添加的元素。

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

 $('.todo-list').on('click','li',function() {
    $(this).toggleClass("checked unchecked");
 });

【讨论】：

【解决方案3】：

您必须将事件绑定到动态生成的事件

$('ul').on("click", "li", function() {
   $(this).toggleClass("checked unchecked");
});

【讨论】：