在动态附加的 `<li>` 上触发 jQuery 函数

Question

我需要运行对 <li> 的任何新 jQuery 函数 appended/added 添加到 <ul> 列表中。我们可能会开始：

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

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

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

我想运行一个jQuery函数在这个（以及任何未来）新<li>上。

使用 .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 API 是观看 DOM 修改的推荐方式。它也很容易集成。

一定要检查 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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

在动态附加的 `<li>` 上触发 jQuery 函数

Fire jQuery function on a `<li>` that is appended dynamically

jquery

dynamic

live