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

Question

我对 jQuery 函数创建的新元素的 "click" 操作有问题，它不起作用。

我为此 link (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

按钮二仅用于擦除。按钮一创建。

<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 函数 return this,

OK;C;SIC-034031;;

按钮一消失，按钮二又回来了。现在问题出在哪里，如果我点击第一个按钮，一切正常。如果我点击第二个按钮，它不起作用。

你能帮我找出问题吗？

谢谢 ;)

Answer 1

jQuery 仅在页面运行时识别页面中的元素，因此添加到 DOM 的新元素无法被 jQuery 识别。为了对抗这种情况，请使用 event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.

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

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

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

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

Function doesn't work after appending new element

html

javascript

css

ajax

jquery