jquery - 当元素存在时触发事件

Question

我有一个空的 div 元素:

<div class="message"></div>

在网页的某个点，p 标签会动态添加到 div 中:

<div class="message">
  <p>Some Message</p>
</div>

p 可以被删除，然后再次添加，依此类推。

如果 div.message 有一个 p 子级，我应该使用什么事件来监听并执行一些代码？

我找到了this问题，但它涉及外部插件。

有没有一种简单的方法可以实现这一点？

Answer 1

根据您的实现以及识别更改所需的速度，您也许可以使用 setInterval 来摆脱困境。定期监控某个元素的内容。

var checkContents = setInterval(function(){
  if ($("div.message p").length > 0){ // Check if element has been found
    // There is a <p> element in here!!
    console.log($("div.message p").length());
  }
},1000);

前面的代码片段将检查 <p> div.message 内的元素每秒(1000 毫秒)个元素，如果存在，会将它们的数量记录到控制台。

<小时/>

根据您的浏览器支持要求，您也可以使用突变事件 -

Mutation events provide a mechanism for a web page or an extension to get notified about changes made to the DOM...

var element = document.querySelectorAll('div.message')
element.addEventListener("DOMNodeInserted", function (ev) {
  // ...
}, false);