클릭 이벤트가 복사 된 HTML에서 작동하지 않습니다.

Question

클릭 이벤트가 복사 된 HTML에서 작동하지 않습니까?

<ul class="dir">//the given ul 
<li> <img class="thumb" src="1.jpg" > </li> 
<li> <img class="thumb" src="2.jpg" > </li> 
<li> <img class="thumb" src="3.jpg" > </li> 
<li> <img class="thumb" src="4.jpg" > </li> 
<li> <img class="thumb" src="5.jpg" > </li> 
<li> <img class="thumb" src="6.jpg" > </li> 
<li> <img class="thumb" src="7.jpg" > </li> 
</ul> 
<ul class="copy"></ul> //copied ul 
<script> 
$(function(){ 
$(".copy").html($(".dir").html()); 
$(".thumb").click(function(){ 
alert("It works only on the .dir's thumb not on .copy's thumb .. why?"); 
} 
); 
} 
</script> 

Answer 1

당신은 그것이 작동하는 이벤트 위임

$(document).on('click', '.thumb', function(){ 
    alert("This works every even if copied"); 
}); 

을 사용해야합니다. .click은 처리기를 선언 할 시점에 존재했던 요소에만 처리기를 연결합니다.