jquery - 在动态创建的元素上调用 .each 的正确方法？

Question

根据此处的答案 https://stackoverflow.com/a/1207393/1786228以及现在相当旧的 jQuery 插件 ( http://www.erichynds.com/jquery/jquery-create-event/ )

创建新元素时 on 捕获的正确事件是什么？例如，我有一个输入框，可以在其中设置提前输入/自动完成。我这样做是通过:

$(.input_box).each( function() { 
  // set stuff here 
  // setup options etc
  // apply autocomplete plugin to element (this is a jQuery plugin)
  var ac = $(this).autocomplete(acOptions);
});

然后我有一个按钮可以将更多相同的输入框添加到表单中。如何为新输入框调用 .each 函数？如果我再次使用 $(.input_box).each... ，原始框中会再次添加该插件。

我基本上想要执行以下操作，但没有要绑定(bind)的“创建”事件。

$(document).on("create", "input_box", function(e) { 
  // set stuff here 
  // setup options etc
  // apply autocomplete plugin to element (this is a jQuery plugin)
  var ac = $(this).autocomplete(acOptions);
} ); 

有这样的事件吗？如果没有，实现这一目标的最佳方法是什么？

Answer 1

如上所述:您可以使用突变事件。但这些事件有一些限制:不支持版本 9 之前的 IE，并且这些事件也存在一些性能问题。在你的情况下，你会听DOMNodeInserted。一个可能的例子:

document.addEventListener("DOMNodeInserted", function(event){
    var target = event.srcElement || event.target;
    if (target && target.tagName.toLowerCase() == 'input') {
        // do what you want to do here....
    }
});

在你的情况下我更喜欢简单一点:将你的初始化逻辑放在一个单独的函数中，并在每次操作 DOM 后调用这个函数。在此函数内，向每个已初始化的元素添加一个类或数据值，并检查此类以确保仅初始化一次:

function init() {
    $('.input_box').not('.initialized').each( function() { 
        var ac = $(this).addClass('initialized').autocomplete(acOptions);
    });
}