在克隆的圖像元素上綁定onclick事件

Question

在我看來，我有幾個拇指的列表。圖片。 在頁面加載時，首個圖像被克隆並加載到相應的div中。之後，每個圖像onclick複製與相應的div內的更大的尺寸。

現在我需要綁定該複製元素上的onclick動作，以簡化警報hello。

這裏是我的代碼至今

<div id="detailsRight"> 
    <div id="showImage"> 
     //here will be copied thumb image 
    </div> 
    <div id="thumbImages"> 
     @if (Model.Images == null) 
     { 
     <h1> no image </h1>  
     } 
     @foreach (var image in Model.Images) 
     { 
     <img src="@image.Path" class="details" width="50" height="50" alt="" />        
     } 
     </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     cloneImages(); 
    }); 
function cloneImages() { 
     var imageObject = $("img.details").first(); 
     var clonedObj = $(imageObject).clone(); 
     clonedObj.height("250px").width("300px"); 
     clonedObj.appendTo($("div#showImage")); 

     $(".details").click(function (event) { 
      //clone the clicked image 
      var clone = $(this).clone(); 
      clone.height("250px").width("300px"); 
      //place it in the placeholder 
      $('div#showImage').html(clone); 
     }); 
    } 
</script> 

Answer 1

你在找這個？

$('div#showImage').on('click','img',function(){ 
    alert('Clicked!'); 
}); 

Answer 2

$(document).ready(function() { 
    cloneImages(); 

    $('#showImage').delegate('img', 'click', function() { 
     alert('Hello'); 
    }); 
});