jQuery的DOM突變

Question

我有此：

<span class="a">test 1</span><div></div> 

爲什麼.b不激活警報？

$(".a").click(function() { 
$('div').html('<span class="b">test 2</span>'); 
}); 

$(".b").click(function() { 
alert("Hello"); 
}); 

我不明白如何檢測DOM的突變。

Answer 1

選擇器在執行時運行，這意味着.b已在頁面加載時搜索，而不是在添加dom之後。

爲了證明選擇的線路如何運行，代碼工作，如果你把它定義附加的元素之後：

$(".a").click(function() { 
 
    $('div').html('<span class="b">test 2</span>'); 
 
    $(".b").click(function() { 
 
    alert("Hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a">test 1</span><div></div>

然而，這樣做將是正確的做法定義一個基於父母的選擇器。以下是爲父母設置一個點擊事件，該事件爲.b選擇器篩選target。

$(".a").click(function() { 
 
    $('div').html('<span class="b">test 2</span>'); 
 
}); 
 

 
$(document.body).on("click", ".b", function() { 
 
    alert("Hello"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a">test 1</span><div></div>

Answer 2

因爲.b查詢已完成後創建。當您在腳本中調用$(".b")時，沒有發現任何東西，並且click事件未附加到它。您可以通過將事件附加到文件像這樣解決的：

$(document).on("click", ".b", function() { 
    alert("hello"); 
}); 

Answer 3

的click()你正在使用被稱爲「直接」約束，這將只處理程序附加到已經存在的元素結合。它不會被綁定到未來創建的元素上。要做到這一點，您必須使用on()創建「委託」綁定。

$('div').on("click", ".b", function() { 
    alert("hello"); 
});