在DOMNodeInserted上無法按預期工作？

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，並且該DIV將與:contains(Banana)匹配，因為Banana Detector標題。 即使將其移出容器，由於先前添加的包含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>