如何在使用jQuery注入HTML后觸發DOMNodeInserted事件

Question

在我們的一個項目中，我們使用AJAX將幻燈片加載到我們的網頁中。 加載幻燈片后，我希望jQuery自動在所有新注入的元素上執行插件。

這是我在其他地方找到的代碼，但它沒有做到這一點。 此外，我試圖用.bind函數替換.on函數，但隨后整個站點都死了，JavaScript崩潰了溢出。

function loaded(selector, callback) {
    //trigger after page load.
    jQuery(function () {
        callback(jQuery(selector));
    });
    //trigger after page update eg ajax event or jquery insert.
    jQuery("body").on('DOMNodeInserted', selector, function (e) {
        callback(jQuery(this));
    });
}

我在JSFiddle中重現了這個問題。

Answer 1

A.沃爾夫，

謝謝你的回答解決了我的問題 。 我已將加載的函數編輯為以下內容：

function loaded(selector, callback) {
    //trigger after page load.
    jQuery(function () {
        callback(jQuery(selector));
    });
    var parentSelector = "* > " + selector;
    //trigger after page update eg ajax event or jquery insert.
    jQuery(document).on('DOMNodeInserted', parentSelector, function (e) {
        callback(jQuery(this).find(selector));
    });
}

此外，我還為想要一個完整工作示例的人分發了一個新的JSFiddle項目。

https://jsfiddle.net/9t8cahqv/

謝謝，

JOP

Answer 2

在容器DIV級別觸發事件，因此您的選擇器不匹配。 你可以改用：

loaded(":has([title])", function(element) {
   element.tooltip();
});
/**/
jQuery(document).on('DOMNodeInserted', selector, function(e) {
   callback(jQuery(this).find('[title]'));
});

-jsFiddle-

Answer 3

另一種方法可能是， 觀察DOM

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes) return

    for (var i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      var node = mutation.addedNodes[i]
      if ($(node).hasClass("some class")) {
        $(node).remove()
      }

      //or with id

      if ($(node).attr("id") == "someId") {
        $(node).remove()
      }

      //or any other selector
    }
  })
})

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
})

要停止觀察，請使用

observer.disconnect();