0

私の見解では、私はいくつかの親指のリストを持っています。画像。ページの読み込み時に、最初の画像が複製され、対応する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>
4

2 に答える 2

2

これをお探しですか？

$('div#showImage').on('click','img',function(){
    alert('Clicked!');
});
于 2012-07-23T11:58:46.273 に答える
1 
$(document).ready(function () {
    cloneImages();

    $('#showImage').delegate('img', 'click', function () {
        alert('Hello');
    });
});
于 2012-07-23T12:03:55.973 に答える