如何在 div 被删除并动态添加时触发事件？答案

【问题标题】：How to fire a event when a div got removed and added dynamically?如何在 div 被删除并动态添加时触发事件？
【发布时间】：2015-12-03 11:19:21
【问题描述】：

我有以下类型的代码

<div id="parent-div">
  <div id="child-div">
    <!--content goes here -->
  </div>
</div>

子 div 来自第三方服务，它将被动态附加或删除。如何在附加删除 div 时触发 javascript 事件

【问题讨论】：

MutationObserver: 为开发人员提供了一种对 DOM 中的变化做出反应的方法。它旨在替代 DOM3 事件规范中定义的突变事件。

标签： javascript jquery html

【解决方案1】：

如果您使用的是 jquery，请使用 .trigger(),

在附加子 div 的函数或代码中，在附加子 div 后放置

$("div#parent-div").trigger("child_div_attached");

在你删除子div的函数或代码中，删除子div后放

$("div#parent-div").trigger("child_div_removed");

然后您可以将事件侦听器添加到父 div，例如，

$("div#parent-div").on("child_div_attached", function() {
  //what to do after child div attached
});

$("div#parent-div").on("child_div_removed", function() {
  //what to do after child div removed
});

【讨论】：

【解决方案2】：

你有两个选择：

有一个循环 - 每 x 毫秒，检查child-div 是否存在/不存在
使用DOM4 MutationObserver - 有关此here 的更多信息。注意：~~目前只有谷歌浏览器支持~~browser support

与关于 DOM4 MutationObserver 的答案相关的问题：

https://stackoverflow.com/a/11141879/5620297

【讨论】：