添加新元素后功能不起作用

Question

我對 jQuery 函數創建的新元素的“單擊”操作有問題，它不起作用。

我為此鏈接 ( JSFiddle ) 創建了一個 JSFiddle，但它不能完美工作，因為我無法在 JSFiddle 中調用 Ajax 請求。

我有這兩個按鈕，

<input type="button" onclick="invia('SIC-034031','', 's');" value="AGGIUNGI" style="height: 20px; width: 110px; background-color: #A5EFC5 ; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>&nbsp;
<input type="button" onclick="invia('SIC-034031','R', 's');" value="RISERVA" style="height: 20px; width: 110px; background-color: #F00000; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px; background-repeat: no-repeat; background-position: left center;" id="iscriviRSIC-034031" class="pulsanteIscrizioni" name="xaggiorna"/>

當您第一次調用 ajax 函數時，按鈕一個會輸出以下輸出：

OK;I;SIC-034031

按鈕二僅用於擦除。 按鈕一創建。

<input id="iscriviSIC-034031" class="pulsanteIscrizioni" type="button" name="xaggiorna" style="height: 20px; width: 110px; background-color: #03F; color: #FFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px;" value="TOGLI" onclick="invia('SIC-034031','');">

當我點擊這個新按鈕時，ajax 函數返回這個，

OK;C;SIC-034031;;

按鈕一消失，按鈕二回來。 現在問題出在哪里，如果我單擊第一個按鈕，一切正常。 如果我單擊第二個按鈕，則不起作用。

你能幫我找出問題嗎？

謝謝 ;）

Answer 1

jQuery 只知道它運行時頁面中的元素，因此添加到 DOM 的新元素不會被 jQuery 識別。 為了解決這個問題，使用事件委托，將事件從新添加的項目冒泡到 DOM 中當 jQuery 在頁面加載時運行時的某個點。 許多人使用document作為捕獲冒泡事件的地方，但沒有必要在 DOM 樹上爬那么高。 理想情況下，您應該委托給頁面加載時存在的最近的父級。

$(".pulsanteIscrizioni").on("click", function()

就是你現在擁有的。 改成——

$(document).on("click", '.pulsanteIscrizioni',function()