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

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

2 个答案: