我的 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 称为 id thumb hotel。

当我不使用模态时。正常工作

当我使用模式时。没用

有什么办法可以解决我的问题吗？

非常感谢

最佳答案

您正走在对动态生成的元素使用委托(delegate)事件方法的正确路径上。但是，您应该使用 .on() 来绑定(bind)而不是 .delegate()

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

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

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

关于javascript - 在模态中单击图像后如何显示图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36588991/