要使用 jQuery 的 each
函數處理動態生成的元素,您需要確保在動態生成的元素添加到 DOM 之后執行該函數。您可以使用事件委托(event delegation)來實現這一點。事件委托是將事件監聽器添加到父元素上,而不是直接添加到目標元素上。當事件觸發時,jQuery 會檢查事件源是否匹配選擇器,如果匹配,則執行相應的回調函數。
以下是一個使用 jQuery 處理動態生成的元素的示例:
HTML 結構:
<div id="container">
<button class="dynamic-button">Click me</button>
</div>
JavaScript/jQuery 代碼:
$(document).ready(function() {
// 給動態生成的按鈕添加點擊事件
$("#container").on("click", ".dynamic-button", function() {
alert("Button clicked: " + $(this).text());
});
// 動態添加新的按鈕
function addNewButton() {
var newButton = $("<button>").addClass("dynamic-button").text("New button");
$("#container").append(newButton);
}
// 每隔一秒鐘添加一個新的按鈕
setInterval(addNewButton, 1000);
});
在這個示例中,我們將點擊事件監聽器添加到了 #container
元素上,而不是直接添加到 .dynamic-button
元素上。當點擊事件觸發時,jQuery 會檢查事件源是否匹配 .dynamic-button
選擇器。如果匹配,則執行相應的回調函數。這樣,無論何時添加新的 .dynamic-button
元素,點擊事件都會被正確處理。