javascript - 如何在使用 jQuery 注入(inject) HTML 后触发 DOMNodeInserted 事件

Question

在我们的一个项目中，我们使用 AJAX 将幻灯片加载到我们的网页中。加载幻灯片后，我希望 jQuery 自动对所有新注入(inject)的元素执行插件。

这是我在其他地方找到的代码，但它并没有起到作用。我还尝试用 .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

一个。沃尔夫，

感谢您的回答解决了我的问题。我已将加载的函数编辑为以下内容:

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

我还为任何想要完整工作示例的人 fork 了一个新的工作 JSFiddle 项目。

https://jsfiddle.net/9t8cahqv/

谢谢，

乔普