Функция не работает после добавления нового элемента

Question

У меня возникла проблема с действием «click» для нового элемента, созданного функцией jQuery, но это не работает.

Я создал JSFiddle для этой ссылки (JSFiddle), но он не работает отлично, потому что я не могу вызвать запрос Ajax в JSFiddle.

У меня есть эти две кнопки,

<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','');"> 

При нажатии этой новой кнопки Аякса функция возвращает это,

OK;C;SIC-034031;; 

Кнопка один уходит и кнопка два возвращается. Теперь есть проблема, если я нажимаю на первую кнопку, все работает. Если я нажму на вторую кнопку, это не сработает.

Вы пытаетесь помочь мне найти проблему, пожалуйста?

Спасибо;)

Answer 1

JQuery знает только из элементов страницы, в то время, что он работает, так что новые элементы, добавленные в DOM являются непризнанным JQuery. Для борьбы с этим используйте event delegation, пузырящиеся события из недавно добавленных элементов до точки в DOM, которая была там, когда jQuery выполнялся при загрузке страницы. Многие люди используют 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()