使用jQuery

时间:2015-12-21 10:52:41

标签: javascript jquery

在我们的一个项目中,我们使用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中重现了问题。

2 个答案:

答案 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();