如何選擇通過JavaScript添加的元素

Question

我有一個簡單的代碼，檢查選擇變化並提醒消息。這是工作正常，但是當我在頁面上插入新.select-payment元素此方法僅適用於通過JavaScript

$(document).ready(function() { 
    return $(".select-payment").on("change", function() { 
    return alert("hello"); 
    }); 
}); 

創建的任何想法的第一個，而不是那些如何使其對於添加任何元素工作在頁面加載後有一個.select-payment類？

Answer 1

$(document).on("change", ".select-payment", function() { 
    alert("hello"); 
}); 

從更改處理程序中返回也很難說，甚至更少，返回警報的結果。

Answer 2

你可以使用event delegation像下面，

$(document).on('change', '.select-payment', function() {.. 

1. 與執行上述行
2. 事件委託綁定的事件父元素和執行時存在的DOM任何的closeby容器更換文檔event.target與指定選擇器匹配時的處理程序。

Answer 3

當針對動態創建的元素，你需要使用.on()的委託語法：

$(document).on("change", ".select-payment", function() { 

從文檔：

事件處理程序只能綁定到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在 。 要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件 綁定。如果新頁面被注入頁面， 選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲 。

Answer 4

你爲什麼要把退貨聲明？您必須將您的事件處理程序附加到文檔，而不是現有的.select-payment。

試試這個：$(document).on("change",".select-payment",function(){...});

Answer 5

$(document).on("change", ".select-payment", function() { 

alert("hello"); } 
); 

您可以將始終存在DOM獲得更好的性能更接近父元素替換文件。像

$('#closestId').on("change", ".select-payment", function() { 

    alert("hello"); 
} 
); 

如果你使用$

（「文件」）jQuery將搜索名爲像文檔中的節點/標籤，並不會發現任何的文件實際上是一個對象。

但是，您可以使用$（「body」），因爲body是DOM的一個節點/元素。