How to show image after clicking the image in modal?

Question

My HTML Code is like this :

<!-- 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 like this :

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

Demo is like this : https://jsfiddle.net/oscar11/10td0yww/1/

When I click the image in the image list, the image has not changed. Though I already call id thumb hotel.

When I not using modal. It's working

When I using modal. It's not working

Any solution to solve my problem?

Thank you very much

Answer 1

You are on correct path of using delegated-events approach for dynamically generated elements. However, You should bind the using .on() instead of .delegate()

As of jQuery 1.7, .delegate() has been superseded by the .on() method,

When binding event use imageHotel as parent static containeras you are replacing thumbs_hotel element completely.

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