javascript - 新添加的元素 $.each 和 events

Question

我已经在 $.each 上阅读了很多帖子。以及新添加的元素+事件附件。 StackOverflow 上当前有关此主题的许多问题似乎对我不起作用。 $.on()通常建议这样做，因为它允许我们附加新元素并且仍然维护单个事件监听器+处理程序。

在我当前的代码中:

1.$(‘input[type="checkbox"]’).on(“change”, function(e){});

//我做了一个逻辑if语句，if(this.checked) else

//在 if 语句中，我运行 $.each，但是，一旦我在此上下文中附加了新元素，就会生成一个新的 li 到 ul，它停止工作。

出于好奇，以前是否有人遇到过类似的情况，如果是，你们是如何解决这个问题的？

我已经看过的一些StackOverflow帖子:

jQuery $(element).each function doesn't work on newly added elements

jquery: dynamically appending li items to ul then adding click, but click runs through each li

Event binding on dynamically created elements?

Answer 1

当前您使用的称为“直接”绑定(bind)，它仅附加到代码进行事件绑定(bind)调用时页面上存在的元素。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

当您创建元素时。

您需要使用Event Delegation 。您必须使用.on()使用委托(delegate)事件方法。

一般语法

$(document).on(event, selector, eventHandler);

理想情况下，您应该将 document 替换为最接近的静态容器。

示例

$(document).on('change', 'input[type="checkbox"]', function(){
  //Your code
});