CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
moses toh
moses toh

Reputation: 13192

How to show image after clicking the image in modal?

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

Upvotes: 5

Views: 2610

Answers (4)

Satpal
Satpal

Reputation: 133453

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

jsFiddle

Upvotes: 2

Rahul K
Rahul K

Reputation: 928

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+

Upvotes: 2

Oli Soproni B.
Oli Soproni B.

Reputation: 2800

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"

Upvotes: 2

Jairo Malanay
Jairo Malanay

Reputation: 1347

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

Upvotes: 1

Related Questions