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

Question

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

现在我需要在该复制元素上绑定 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!');
});

Answer 2

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

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