CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3
Grunf
Grunf

Reputation: 472

bind onclick event on cloned image element

In my view I have list of several thumb. images. On page load first image is cloned and loaded in corresponding div. After that every image onclick is copied with larger dimensions inside that corresponding div.

Now I need to bind onclick action on that copied element to reproduce for simplicity alert hello.

Here's the code I have so far

<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>

Upvotes: 0

Views: 653

Answers (2)

Pavel Reznikov
Pavel Reznikov

Reputation: 3208

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

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

Upvotes: 1

Engineer
Engineer

Reputation: 48803

Are you looking for this?

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

Upvotes: 2

Related Questions