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

【问题标题】：Fire jQuery function on a `<li>` that is appended dynamically在动态附加的 `<li>` 上触发 jQuery 函数
【发布时间】：2019-10-17 14:30:33
【问题描述】：

我需要在添加/添加到 <ul> 列表的任何新 <li> 上运行 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");
});

【问题讨论】：

为什么不在你添加的地方做呢？
@mplungjan 场景是我最初使用 MathJax 排版页面以具有数学格式，并且在聊天窗口中我希望仅对添加到聊天窗口的那些消息再次运行 MathJax .
DOMSubtreeModified 已弃用，取而代之的是 the MutationObserver API。您的第一步应该是使用 MutationObserver 获取新代码。

标签： jquery dynamic live

【解决方案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>

【讨论】：