附加新元素后,函数不起作用

Question

我对jQuery函数创建的新元素上的"click"操作有问题,但它不起作用.

我为这个链接(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函数时,按钮1会回答这个输出:

OK;I;SIC-034031

按钮2仅用于擦除.按钮一创建.

<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识别.为了解决这种使用事件委托问题,将新添加的项目中的事件冒泡到jQuery在页面加载时运行时在DOM中的某个点.许多人使用它document作为捕捉起泡事件的地方,但没有必要在DOM树上走得那么高.理想情况下,您应该委托给页面加载时存在的最近的父级.

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

是你现在拥有的.将其更改为 -

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