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

您需要将委托绑定到正在插入的元素的直接父级。

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

这就是为什么你在实际匹配时得到两次射击的原因：它会为匹配的新元素触发一次，对于总是匹配的容器再触发一次。

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

＆＃13;

$("#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>');
});

＆＃13;

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

＆＃13;

在DOMNodeInserted上没有按预期工作？

1 个答案: