Jquery：更改 div 的内容会修改其行为

Question

我有一组具有 2 个功能的图像。首先是我在侧面有缩略图，单击时它们将在侧面显示为全尺寸。默认情况下，第一个图像以全尺寸显示。另一个在大图像中工作。它基本上是一个全屏缩放。

在不切换图像的情况下缩放效果很好，但如果我替换它，即使单击它的缩略图（所以我是同一张图片，页面源代码也是一样的）。单击它时，它会打开图像而不是缩放。

这是HTML

<div class="images">
<!-- Thumbnails -->
<div class="thumbnails">
    <div class="thumb">
        <a href="imageroute.jpg" title="Colección Nati Jimenez 2018"
            data-width="700" data-height="990" data-index="0">
            <img src="imageroute.jpg" alt="Colección Nati Jimenez 2018"
                itemprop="image">
            <input type="hidden" value="imageroute.jpg" class="imgFull">
        </a>
    </div>
    <div class="thumb">
        <a href="imageroute.jpg" data-width="700" data-height="990"
            data-index="1">
            <img src="imageroute.jpg">
            <input type="hidden" value="imageroute.jpg" class="imgFull">
        </a>
    </div>
</div>
<!-- Big Image -->
<div class="image-big">
    <a href="imageroute.jpg" title="Colección Nati Jimenez 2018"
        data-width="700" data-height="990" data-index="2">
        <img src="imageroute.jpg" alt="Colección Nati Jimenez 2018"
            itemprop="image">
        <input type="hidden" value="imageroute.jpg" class="imgFull">
    </a>
</div>

这是jQuery脚本

<script>
var currentScroll = 0;
jQuery(function($) {

    //Stuff

    //Image Change
    $('.thumbnails .thumb').click(function(e){
        e.preventDefault();
        $contenido = $(this).html();                                
        $('.images .image-big').html($contenido);                                
    });

    //Zoom
    $('.images .image-big a ').click(function(e) {
        if (isMobile.any()) {
             $('body').bind('touchmove', function(e){e.preventDefault()});
        } else {                                    
            currentScroll = document.documentElement.scrollTop;
            document.body.scrollTop = document.documentElement.scrollTop = 0; // go to top
            $('body').addClass('disable-scrolling'); // disable scroll                                    
        }

        currentIndex = $(this).data("index");

        $('.zoom img').attr('src', $(this).find('.imgFull').val());
        $('.zoom').fadeIn();

        zoom(e, $(this).data('width'), $(this).data('height'));

        return false;
    });

    //More Stuff

});

Answer 1

正如@qvotaxon 的评论所建议的，您需要委托点击事件。这意味着，您无需绑定到实际的 dom 元素（将被替换），而是监听文档。

简单替换

$('.images .image-big a ').click(function(e) { ... });

来自

$(document).on('click', '.images .image-big a ', function(e) { ... });)

Jquery：更改 div 的内容会修改其行为

Jquery: Changing Content of a div modifies its behaviour

html

jquery

replace

innerhtml