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的评论所示，您需要委派click事件。这意味着，不要绑定到实际的dom元素（要替换），而是在文档上进行侦听。

简单地替换

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

通过

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

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

1 个答案: