jquery - 元素存在时触发事件

Question

我有一个空div元素：

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

在网页的某个点，一个p标签被动态添加到 div 中：

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

可以删除，然后p再次添加等等。

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

我发现了这个问题，但它涉及外部插件。

难道没有一种简单的方法可以做到这一点吗？

Answer 1

根据您的实现以及您需要以多快的速度识别更改，您可能能够避免使用 asetInterval定期监视某个元素的内容。

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);

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

---

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

突变事件为网页或扩展提供了一种机制，以获取有关对 DOM 所做更改的通知...

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

Answer 2

Vanilla JS 有一种很棒的方法来检测任何 DOM 更改（包括节点是否添加了任何子节点），请查看：https ://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

但是这些文档不是很清楚，所以这里有一个快速的解释。

首先，你想要一个目标节点来监听：

const targetNode = document.getElementById('some-id');

然后你想在目标改变时创建一个触发器（称为 MutationObserver）：

const observer = new MutationObserver(callbackFunction);

定义当目标改变时你想要发生的事情：

const callbackFunction = function(mutationsList) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } };

注意：mutationsList 是一个包含大量信息的对象，targetNode 发生了什么变化，包括样式、addedNodes 等...

最后，您可以开始观察目标节点的突变（更改）：

observer.observe(targetNode, { childlist: true, attributes: true });

第二个参数是一个“选项”对象，用于定义您正在寻找的突变（更改）类型。

希望这会有所帮助，我发现它是 js 中一个非常强大且被低估的工具