jQuery：爲什麼點擊函數沒有在生成的按鈕上調用

這是一個jsFiddle來解釋我的問題。如果您嘗試單擊「添加配料」按鈕，則會調用按鈕單擊事件。我的問題是，當我點擊「創建字幕」時，它會爲每個子類別動態創建「添加配料」按鈕。所有按鈕都有一個以「create-ingredient」開頭的相同ID，並與一個唯一的ID連接，因此它爲該按鈕創建一個唯一的ID。然後，我使用jQuery中的「start with」選擇器來選擇以「create-ingredient」開頭的所有按鈕。它只是不選擇動態創建的那些，它只是與最初在html頁面中的那個一起工作。jQuery：爲什麼點擊函數沒有在生成的按鈕上調用

這裏是click事件沒有對動態的勃發：

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

什麼我需要改變，以便動態創建按鈕事件被調用？

謝謝！

來源

2012-12-12 Jean-François Côté

我猜你想通了獎金問題？如果沒有，請參閱：http://jsfiddle.net/fRssf/5/。我想你只是想使用'$（this）.closest（'tr'）。index（）'。 – McGarnagle

謝謝！是的，我想出了獎勵問題，並將其刪除以清楚地說明問題。 –

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

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

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

其中「容器」選擇一個靜態容器元素（可以只是「文件」），以及「選擇」是，你要定位的元素。

Forked Fiddle.

編輯

明確每大衛的評論上面：利用on實際上附加一個事件處理程序「容器」，並委託回調到容器內的任何元素匹配「選擇器」。這是一個很值得閱讀的例子：JQuery docs：

當提供選擇器時，事件處理程序被稱爲委託。當事件直接發生在綁定元素上時，處理程序不會被調用，但僅對匹配選擇器的後代（內部元素）纔會調用該處理程序。 jQuery將事件從事件目標引發到處理程序所附的元素（即，最內層到最外層元素），並沿着匹配選擇器的路徑上的任何元素運行處理程序。

來源

2012-12-12 01:39:56 McGarnagle

或者如果它的老jQuery然後使用'委託' –

我更新了jsfiddle來演示這個：http：// jsfiddle。net/cgDeV/6/ –

「甚至在添加的元素上觸發事件」 - 雖然這是事實，但它並不反映委派事件時真正發生的事情。另外，在你的例子中使用'on'時，你在技術上和'bind'完全相同。 – David

嘗試：的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; 
});

來源

2012-12-12 01:40:51

現場被摧毀 –

是的，使用.... –

jQuery：爲什麼點擊函數沒有在生成的按鈕上調用

回答

相關問題