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=".jpg" />';

        htmlData += '</div>';


        htmlData += '<div id="thumbs_hotel">';

            htmlData += '<img src=".jpg" />';
            htmlData += '<img src=".jpg" />';
            htmlData += '<img src=".jpg" />';
            htmlData += '<img src=".jpg" />';
            htmlData += '<img src=".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 : /

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

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

• I update my jsfiddle – moses toh Commented Apr 13, 2016 at 5:06

4 Answers 4

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

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

Here is update to your fiddle

DEMO

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

Put it inside the click event when the inserting the images on the pop by the "Click to view"

Use this

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

Below lists which version you should be using

$(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+

you should move your

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

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

working fiddle