在我们的一个项目中,我们使用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中重现了问题。
答案 0 :(得分:3)
一个。沃尔夫
感谢您的回答解决了我的问题。我已将加载的函数编辑为以下内容:
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的
答案 1 :(得分:1)
另一种方法可能是,关注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();