DOM에서 복제 된/삽입 된 요소에 이벤트를 트리거하는 방법은 무엇입니까?

Question

DOM에 복제/삽입하는 요소에서 이벤트를 트리거 할 수 없습니다.

바이올린 here을 확인하십시오.

HTML :

<div class="A">[THIS IS DIV A]</div> 
<div class="B">CLICK TO CLONE DIV A</div> 

jQuery를 : 나는 복제 DIV A 클릭하면

$('.A').on("click",null,function() {  
    alert('DIV A CLICK');   
}); 

$('.B').on("click",null,function() {   
    $('.A').clone().insertAfter('.A');   
}); 

는 아무 일도 발생하지 않습니다.

어떻게 복제 된 요소에서 이벤트를 트리거 할 수 있습니까?

Answer 1

내가 제안하는 두 가지 해결책이 있습니다. clone()의 첫 번째 인수로

$('.A').clone(true).insertAfter('.A'); 

나타냅니다 : 그것은 것

첫째

,이 경우 더 나은 옵션을,이 경우 예를 들어, clone()에 true 인수를 추가하는 것입니다

"이벤트 처리기와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 부울 기본값은 false입니다." - jQuery API section for clone().

이것은 모든 바운드 이벤트가 복제 된 각 요소에 보관된다는 것을 의미합니다.

jsFiddle here.

---

두 번째 옵션이 예를 들어 갈 아마 방법은, on()의 이벤트 위임 기능을 사용하는 것입니다 :

"위임 된 이벤트는 이점을 가지고 그 나중에 문서에 추가 된 하위 요소 인 의 이벤트를 처리 할 수 ​​있습니다. " - jQuery API section for on(). 이 경우

:

$(document).on("click", ".A", function() { ... 

지금, 클래스 .A와 모든 새로운 요소가 될 것입니다이 클릭 이벤트도 복제 요소에 첨부했다.

jsFiddle here.