jQuery：為什么未在生成的按鈕上調用click函數

Question

這是一個jsFiddle來解釋我的問題。 如果您嘗試單擊按鈕“添加成分”，則將調用按鈕單擊事件。 我的問題是，當我單擊“創建字幕”時，它為每個子類別動態創建了“添加成分”按鈕。 所有按鈕都具有相同的ID，以“ create-ingredient”開頭，並帶有唯一的ID，因此它為按鈕創建了唯一的ID。 然后，我在jQuery中使用“開始於”選擇器來選擇所有以“ create-ingredient”開始的按鈕。 它只是不選擇動態創建的內容，而僅與HTML頁面中的內容一起使用。

這是點擊事件未在動態事件上觸發的事件：

$("[name^='create-ingredient']").click(function() {
    alert('ingredient clicked');
    return false;
});​

我需要更改什么才能調用動態創建的按鈕事件？

謝謝！

Answer 1

click靜態連接事件。 您需要on ，即使在添加的元素上也會觸發事件。

請注意， on的語法與click略有不同。 您通常使用：

$("container").on("click", "selector", handler);

其中“容器”選擇一個靜態容器元素（可以只是“文檔”），而“選擇器”是您要定位的元素。

分叉的小提琴。

---

編輯

根據David的評論澄清以上內容： on的使用實際上將事件處理程序附加到“容器”，並將回調委托給容器內與“選擇器”匹配的任何元素。 在這種情況下，非常值得閱讀JQuery文檔 ：

提供選擇器后，事件處理程序稱為“委托”。 當事件直接發生在綁定元素上時，不調用處理程序，而僅對與選擇器匹配的后代（內部元素）進行調用。 jQuery使事件從事件目標一直冒泡到附加了處理程序的元素（即，最內層元素到最外層元素），並沿該路徑運行與選擇器匹配的任何元素的處理程序。

Answer 2

試試：jQuery（> 1.7）

$(document).on('click', '[name^="create-ingredient"]', function() {
    alert('ingredient clicked');
    return false;
});

或用於較舊的jQuery（<1.7）

$("[name^='create-ingredient']").live(function() {
    alert('ingredient clicked');
    return false;
});