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

2023年8月13日 323次阅读

继续来自这里的答案
https://stackoverflow.com/a/1207393/1786228和现在相当古老的jQuery插件(
http://www.erichynds.com/jquery/jquery-create-event/)

创建新元素时捕获的正确事件是什么？例如,我有输入框,我在其中设置了typeahead / autocomplete.我这样做：

$(.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,则原始框会再次添加插件.

我基本上想要执行下面的操作但是没有要绑定的“create”事件.

$(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);
} );

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

最佳答案 如上所述：您可以使用突变事件.但是这些事件有一些限制：在版本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....
    }
});

在我的情况下我更喜欢的是更简单：将init逻辑放在一个单独的函数中,并在每次操作DOM后调用此函数.在此函数内部,为每个初始化的元素添加一个类或数据值,并检查此类以确保只初始化一次：

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