如何将类添加到页面稍后出现的元素？ [复制]答案

【问题标题】：How to addClass to an element that appears later in the page? [duplicate]如何将类添加到页面稍后出现的元素？ [复制]
【发布时间】：2018-11-14 11:54:00
【问题描述】：

我有以下 jquery 代码：

$('.kv-editable-reset').addClass('green');

应该将“green”类添加到此元素：

<button type="button" class="btn kv-editable-reset"></button>

但它不起作用，因为 .kv-editable-reset 仅在页面稍后出现，点击以下按钮后：

<button type="button" class="kv-editable-link"></button>

如何检测仅在另一个元素被点击之后才出现在页面中的元素？

【问题讨论】：

您可以使用 MutationObserver，但这确实是最后的手段。您是否可以控制何时将 kv-editable-reset 类添加到元素中？还是在事件发生时引发事件？如果是这样，请将您的逻辑放在那里。
您可以使用 .delay(1000) 延迟 1 秒的功能
@Matt.S 如果类在 20 秒后添加会发生什么？或者如果类是在 0.001 秒后添加的，但你让用户等待 1 秒 :)
@OP 假设这仅用于 UI 目的，那么您可以将 green 的 CSS 规则放入 .kv-editable-reset` 类中
@aliengirl 你的意思是.kv-editable-reset 是点击.kv-editable-link 后出现的动态按钮

标签： jquery html css

【解决方案1】：

只需监听该按钮的点击事件，然后重新寻址添加.green 类。

通过使用.toggleClass('green', true)，您甚至不必关心获取预先存在的按钮并将此类重新分配给它们

$(() => {
  $('.kv-editable-link').on('click', function() {
    $("html").append(`<button type="button" class="btn kv-editable-reset">kv-editable-reset</button>`);
    $('.kv-editable-reset').toggleClass('green', true);
  });
});

.green{
  background-color: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="kv-editable-link">kv-editable-link</button>

【讨论】：

如果您准确阅读问题，OP 想要检测页面中出现的元素
@Mohammad 我知道他想要，但 OP 不一定需要。
如果他们不控制何时添加内容，他们会控制
@RoryMcCrossan 有效。