為什麼我的 JavaScript 事件在新增元素後不觸發？

附加後 JavaScript 不觸發

問題摘要

使用 JavaScript 將新輸入元素加入網頁時，後續事件可能不會觸發。這是因為 jQuery 不知道這些新加入的元素。

事件委託和冒泡

jQuery 透過為特定元素註冊事件處理程序來運作。但是，當動態新增元素時，這些事件處理程序無法辨識它們。為了解決這個問題，使用了事件委託。

事件委託涉及監聽在載入 jQuery 時已經存在於 DOM 中的父元素上的事件。當嵌套子元素內發生事件時，它會向上冒泡到父元素，事件處理程序可以捕獲該事件。

程式碼解決方案

要在提供的程式碼中使用事件委託，應修改按鈕的事件處理程序以使用 on() 方法。此方法允許將事件監聽委託給父元素。

$(document).on('click', '.races', function(e) {
  // ... rest of the code
});

透過使用 $(document).on()，事件將被委託給文件對象，該對像在 DOM 中存在頁面載入。這確保了新新增的 .races 元素中的事件將被事件處理程序擷取和處理。

以上是為什麼我的 JavaScript 事件在新增元素後不觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！