How to show the image after clicking on the image in modal mode?

Question

My HTML code is as follows:

<!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> 

My JavaScript code is as follows:

 <script type="text/javascript"> htmlData = ''; htmlData = 'Photos<a href="#" id="hotel_photo" data-hotel-code="nases">(Click to View)</a><br><br>'; htmlData += '<div class="imageHotel"></div>'; $('#myModal').find('.modal-body').html(htmlData); $(".imageHotel").hide(); $(document).on("click", "#hotel_photo", function(event){ $(".imageHotel").toggle(); event.preventDefault(); htmlData += '<div id="gallery_hotel">'; htmlData = '<img id="largeImage" src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />'; htmlData += '</div>'; htmlData += '<div id="thumbs_hotel">'; htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />'; htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />'; htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />'; htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />'; htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />'; htmlData += '</div>'; $('.imageHotel').html(htmlData); }); $('#thumbs_hotel').delegate('img','click', function(){ // alert('tes'); $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); }); </script> 

The demo is as follows: https://jsfiddle.net/oscar11/10td0yww/1/

When I click an image in the image list, the image does not change. Although I already called the hotel thumb.

When I do not use modal. he works

When I use modal. He does not work

Any solution to solve my problem?

Thank you very much

Answer 1

You are on the right track to using the delegated events approach for dynamically generated elements. However, you should bind using .on() instead of .delegate()

As in jQuery 1.7, .delegate() been replaced with the .on() method,

When binding events, use imageHotel as the parent static keepers, you completely replace the thumbs_hotel element.

 $('.imageHotel').on('click', '#thumbs_hotel img', function() { $('#largeImage').prop('src', this.src.replace('thumb', 'large')); }); 

Answer 2

Here is an update to your violin

Demo

Use this

 // bind the click event $('#thumbs_hotel').off().on('click', 'img', function () { console.log($(this).attr('src')); $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); }); 

Place it inside the click event when inserting images into the default folder is done using "Click to view

Answer 3

Use this

 $('body').on('click', '#thumbs_hotel img', function () { $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large')); }); 

Listed below are which version you should use.

$ (selector) .live (events, data, handler); // jQuery 1.3 +

$ (document) .delegate (selector, events, data, handler); // jQuery 1.4.3 +

$ (document) .on (events, selector, data, handler); // jQuery 1.7 +

Answer 4

you should move

 $('#thumbs_hotel').delegate('img','click', function(){ $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); }); 

inside $(document).on("click") because the event is not bound in the newly added dom

working violin