CSS没有处理动态创建的内容[jQuery]

Question

我的代码似乎正在处理来自HTML文件的内容，但不是动态创建的元素。

$("li").on("click", function() {
  $(this).toggleClass("completed");
}

它也不适用于css()。有什么建议吗？

Answer 1

简单地

$(document).on( 'click', 'li', function() {
    $(this).toggleClass("completed");
} );

事件侦听器附加到文档。但只有在单击<li>元素时才会触发回调。

您的原始代码无效，因为事件侦听器已附加到现有元素。但它不会自动附加到稍后创建的新元素上。

正如Erik Philips正确评论的那样，如果你有一个包含大量元素的页面，那么效果不是很好。

您可以将document替换为包含<li>元素的“父”元素。

这可能只是投标人<ul>节点。如果你有很多人给它一个 id 并使用它作为参考：$( '#the_list' ).on( 'click', 'li', function()...

这将避免jQuery在每次点击时搜索整个文档以搜索<li>个节点。

Answer 2

在该功能结束时

您错过了结束）。我只是把你的代码放到一个jsfiddle中，它工作正常。