如何在使用jQuery注入HTML后触发DOMNodeInserted事件

Question

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

这是我在其他地方找到的代码,但它没有做到这一点.此外,我试图用.on函数替换函数,.bind但整个网站都死了,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/

谢谢，

乔普