Jquery: изменение содержимого div изменяет его поведение - PullRequest
Новая
       10

Jquery: изменение содержимого div изменяет его поведение

0 голосов
/ 07 июня 2018

У меня есть набор изображений с 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

});

1 Ответ

0 голосов
/ 07 июня 2018

Как следует из комментария @qvotaxon, вам необходимо делегировать событие click.это означает, что вместо привязки к фактическому элементу dom (который должен быть заменен) вы прослушиваете документ.

просто замените 

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

на 

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