동적으로 생성 된 이미지의 onclick()이 작동하지 않습니다.

폴더의 모든 이미지를 div에로드하려고합니다 (id = "wrap")하지만 클릭 기능이 작동하지 않습니다. 왜?동적으로 생성 된 이미지의 onclick()이 작동하지 않습니다.

아래 코드는 제 코드입니다.

<script> 
    $(document).ready(function() { 

     var folder = 'images/print/thumb/' 
     post_data = {'folder':folder}; 

     $.post('get_images.php', post_data, function(images){ 
      for (var i = 0; i < images.length; i++) { 

       var tag = '<img class="thumb" src="' + folder + images[i] + '" />'; 

       $("#wrap").prepend(tag); 
      } 

     }, 'json'); 

     $(".thumb").click(function(){ 
      alert(this.id); 
     }); 

    }); 
</script> 

<body> 
    <div id="wrap" style="padding:20px;"> 
    </div> 
</body>

이미지를 완벽하게로드합니다. 클릭 이벤트에만 문제가 있습니다.

출처

2014-10-09 Tom

다시 아약스 호출의 내부 부분을 등록하는 이벤트를 배치하려고

$.post('get_images.php', post_data, function(images) { 

     for (var i = 0; i < images.length; i++) { 
     var tag = '<img class="thumb" src="' + folder + images[i] + '" />'; 
     $("#wrap").prepend(tag); 
     } 

     $(".thumb").click(function(){ 
      alert(this.id); 
     }); 

}, 'json');

또는 가장 좋은 방법은 event delegation 사용하는 것

$("#wrap").on("click", ".thumb", function(){ 
    alert(this.id); 
});

출처

2014-10-09 05:59:55

동적으로 생성 된 이미지의 onclick()이 작동하지 않습니다.

답변

관련 문제