javascript - DOMNodeInserted 未按预期工作？

Question

基于this question ，我写了以下代码:

$(function() {
    $( document ).on('DOMNodeInserted',"span:contains('Suggested Post')", function() {
        console.log("New Suggested Post found");
    })
})

当我向下滚动页面并创建这些元素时，我没有看到我期望看到的控制台消息。但是，如果我在控制台中手动输入 $("span:contains('Suggested Post')").length ，输出会继续增加。

想法？

@Barmar 请求的片段。它的行为与我的现实世界场景并不完全一样，但它仍然不正确......

$(document).on('DOMNodeInserted', "div:contains('Banana')", function() {
  console.log("new banana detected!");
});

$('#btn').on('click', function() {
  var fruit = '';
  switch (Math.floor((Math.random() * 3) + 1)) {
    case 1:
      fruit = 'Apple'
      break;
    case 2:
      fruit = 'Orange'
      break;
    case 3:
      fruit = 'Banana'
      break;
    default:
      fruit = "WTF"
  }
  $('#fakeDocument').append('<div>' + fruit + '</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fakeDocument">
  <strong>Banana Detector</strong>
  <button id="btn" type="button">Add Banana!</button>
</div>

Answer 1

您需要将委托(delegate)绑定(bind)到要插入的元素的直接父元素。

其原因是 DOMNodeInserted 事件冒泡。如果将其绑定(bind)到外部容器，它将冒泡到包含 DIV，并且由于 Banana Detector 标题，该 DIV 将匹配 :contains(Banana)。即使您将其移出容器，它也会匹配，因为之前添加的节点包含 Banana。

这就是为什么在实际匹配时会触发两次:它会为匹配的新元素触发一次，并为始终匹配的容器再次触发。

我最初认为 event.StopPropagation() 可以解决问题，但事实并非如此。当有实际比赛时，它将防止双重射击。但当没有匹配时它仍然会触发 - 事件不会在新元素上触发(因为它不匹配)，因此 event.stopPropagation() 不会运行，所以它冒泡到匹配的容器中。

$("#fakeDocument").on('DOMNodeInserted', "div:contains('Banana')", function() {
  console.log("new banana detected!");
});

$('#btn').on('click', function() {
  var fruit = '';
  switch (Math.floor((Math.random() * 3) + 1)) {
    case 1:
      fruit = 'Apple'
      break;
    case 2:
      fruit = 'Orange'
      break;
    case 3:
      fruit = 'Banana'
      break;
    default:
      fruit = "WTF"
  }
  $('#fakeDocument').append('<div>' + fruit + '</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fakeDocument">
  <strong>Banana Detector</strong>
  <button id="btn" type="button">Add Banana!</button>
</div>