Fire jQuery function on` `动态附加

Question

我需要在添加或添加到<li>列表的任何新<ul>上运行jQuery函数，就在添加时。我们可以从以下开始：

<ul id="my">
  <li></li>
  <li></li>
</ul>

在页面上发生某些事件之后，但没有刷新页面，我们有了这个：

<ul id="my">
  <li></li>
  <li></li>
  <li></li> <!-- Added dynamically -->
</ul>

我想在此[以及以后的任何新版本] <li>上运行jQuery函数。

使用.on功能，我可以捕捉到包装<ul>发生的任何更改：

jQuery('body').on('DOMSubtreeModified', 'ul#my', function() {
  ...
});

我如何进行调整以不捕获<ul>内部的任何更改，而是捕获正在添加的特定<li>？类似于以下内容：

jQuery('body').on('DOMSubtreeModified', 'NEW_LI', function() {
  NEW_LI.css("background-color", "yellow");
});

Answer 1

请务必检查MutationObserver变量，以了解您可以访问哪种信息。

mutation

function createObserver(callback) {
    return new MutationObserver(function (mutationRecords) {
        mutationRecords.forEach(callback);
    });
}

$("ul").each(function () {
    var obs = createObserver(function (mutation) {
        $(mutation.addedNodes).css("background-color", "yellow");
        setTimeout(function () {
            $(mutation.addedNodes).css("background-color", "");
        }, 1000);
    });
    obs.observe(this, { childList: true });
});


// ---------------------------------------------------------------

setTimeout(function () {
    $("<li>New content appears!</li>").appendTo("ul#my");
}, 2000);