CODEWITHSUNDEEP
jqueryhtmlreplaceinnerhtml
Juan Antonio Rodríguez Gabriel
Juan Antonio Rodríguez Gabriel

Reputation: 125

Jquery: Changing Content of a div modifies its behaviour

I have a set of images with 2 functionalities. The first is that I have the thumbnails on the side and when clicked they will appear full size on the side. By default the first image is displayed full size. The other works in the big image. It is basically a full screen zoom.

Without switching the images the zoom works fine, but if I replace it, even if clicking its thumbnail (so i't the same image, and the page source code it the same). When clicking it it opens the image instead of zooming.

This is the 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>

This is the jQuery script

<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

});

Upvotes: 0

Views: 48

Answers (1)

schellmax
schellmax

Reputation: 6094

as the comment by @qvotaxon suggests, you need to delegate the click event. this means, instead of binding to the actual dom element (which is to be replaced), you listen on the document.

simply replace

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

by

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

Upvotes: 1

Related Questions