Question

继续点击此处https://stackoverflow.com/a/1207393/1786228和现在相当古老的jQuery插件（http://www.erichynds.com/jquery/jquery-create-event/）

创建新元素时on捕获的正确事件是什么？例如，我有输入框，我在其中设置了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);
} );

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

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....
    }
});

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

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

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

1 个答案: