새 요소를 추가 한 후 함수가 작동하지 않습니다.

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"/> 

처음 아약스 기능 버튼이 출력 한 응답 전화

:이 만 삭제하는 데 사용됩니다

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을 사용하여 새로 추가 된 항목의 이벤트를 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()