javascript - 在克隆的图像元素上绑定(bind) onclick 事件

Question

在我看来，我有几个拇指 list 。图片。页面加载时，第一个图像被克隆并加载到相应的 div 中。之后，每个图像 onclick 都会以更大的尺寸复制到相应的 div 内。

现在，我需要在复制的元素上绑定(bind) onclick 操作，以便为简单起见进行重现警报你好。

这是我到目前为止的代码

<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!');
});