click事件不适用于复制的HTML

Question

Click事件不适用于复制的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才会将处理程序附加到元素上，这些元素在声明处理程序时就已存在。