如何在模态框中点击图片后显示图片？

Question

我的HTML代码如下：

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

我的JavaScript代码如下：

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

这里有个演示：https://jsfiddle.net/oscar11/10td0yww/1/ 当我点击图片列表中的图片时，图片并没有改变。虽然我已经调用了ID为thumb hotel的元素。

如果我不使用模态框，它可以正常工作。

但是当我使用模态框时，它就不能正常工作了。

有什么解决方案可以解决我的问题吗？

非常感谢。

- moses toh

---

我更新了我的 jsfiddle。 - moses toh

Answer 1

这是您fiddle的更新

演示

请使用此功能

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

在弹出窗口中插入图片时，将它放在"点击查看"的点击事件里。

- Oli Soproni B.

Answer 2

请使用此功能。

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

以下列出了您应该使用的版本

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

注：以上是关于选择正确的jQuery版本的参考信息。

- Rahul K

Answer 3

您正在正确地使用委托事件方法来处理动态生成的元素。但是，您应该使用.on()方法来绑定事件，而不是.delegate()方法。

自jQuery 1.7起，.delegate()方法已被.on()方法取代。

当绑定事件时，请使用imageHotel作为静态父容器，因为您要完全替换thumbs_hotel元素。

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

- Satpal

---

我需要你的帮助。请看这里: http://stackoverflow.com/questions/37209847/how-to-send-parameter-json-array-when-modal-open - moses toh

Answer 4

你应该移动你的。

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

在新附加的DOM中，事件没有绑定，因此需要在$(document).on("click")内部进行处理。

工作的fiddle

- Jairo Malanay