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

Posted 2023-05-07

【中文标题】Jquery：更改 div 的内容会修改其行为

【英文标题】：Jquery: Changing Content of a div modifies its behaviour

【发布时间】：2018-11-17 05:08:03

【问题描述】：

我有一组具有 2 个功能的图像。 第一个是我在侧面有缩略图，点击后它们会在侧面显示全尺寸。默认情况下，第一张图像显示为全尺寸。 其他作品在大图像中。它基本上是全屏缩放。

不切换图像缩放工作正常，但如果我替换它，即使单击它的缩略图（所以我不是相同的图像，并且页面源代码相同）。单击它时，它会打开图像而不是缩放。

这是 html

<div class="images">
<!-- Thumbnails -->
<div class="thumbnails">
    <div class="thumb">
        <a href="imageroute.jpg" title="Colección Nati Jimenez 2018"
            data- data- data-index="0">
            <img src="imageroute.jpg" 
                itemprop="image">
            <input type="hidden" value="imageroute.jpg" class="imgFull">
        </a>
    </div>
    <div class="thumb">
        <a href="imageroute.jpg" data- data-
            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- data- data-index="2">
        <img src="imageroute.jpg" 
            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

);

【问题讨论】：

这种行为的一个可能原因（我认为这实际上是问题所在）是您绑定到“.images .image-big a”的点击事件的功能在您删除时被删除替换div的内容。一种可能的解决方案是使用委托事件绑定器，http://api.jquery.com/delegate/。

【参考方案1】：

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

简单替换

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

通过

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

【讨论】：

这行得通！使用它时我应该注意什么？一些副作用？

没有需要考虑的有害副作用，但我建议阅读 jquery docs for delegates。