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

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 识别。为了解决这个问题，使用event delegation，从新添加的项目中冒泡事件直到 jQuery 在页面加载时运行时所在的 DOM 中的某个点。许多人使用document 作为捕捉冒泡事件的地方，但没有必要在DOM 树上爬那么高。理想情况下you should delegate to the nearest parent that exists at the time of page load.

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

就是你现在所拥有的。将其更改为 -

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