Emese Pócsik
Emese Pócsik

Reputation: 85

Divs are added exponentially with append funcion in Jquery

I have a jquery lightbox but the navigation doesn't work well. I added the lightbox with append function to the body tag, but when I click on the next arrow the lightbox added to the body tag multiplied. At first I can see the next item, but after that I got the 4th one. I got this line: 1,2,4,8,16.

What has to be changed in the function that lightbox div added only once to body tag?

$(document).ready(function() {
var item, img, large_img, imgtag;
var doc = $(document);

$("#lightbox li").click(function() {

    item = $(this);
    img = item.find("img");
    large_img = new Image();
    large_img.src = img.attr("data-large") ? img.attr("data-large") : img.attr("src");
    $("#lightbox li.active").removeClass("active");
    item.addClass("active");

    var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
    var controls = '<span class="previmg"></span><span class="nextimg"></span>';
    $(gallery).appendTo("body");

    $(large_img).load(function() {
        $(".gallerycontent").html(function() {
            imgtag = '<div class="galleryimg"><img src="' + large_img.src + '" style="opacity: 0; " /><span class="previmg"></span><span class="nextimg"></span></div>';
            $(".gallerycontent").html(imgtag);
            $(".gallerycontent img").fadeTo(600, 1);
        })
    })

    doc.on("click", ".previmg", function() {navigate(-1)});
    doc.on("click", ".nextimg", function() {navigate(1)});
    doc.on("click", ".galleryclose", function(){ navigate(0) });

    function navigate(direction){
        if (direction == -1){
            $("#lightbox li.active").prev().trigger("click");
            }
        else if (direction == 1){ 
            $("#lightbox li.active").next().trigger("click");
            }
        else if (direction == 0){
            $("#lightbox li.active").removeClass("active");
            $(".gallery").fadeOut(300, function() { $(this).remove(); });
        }
    }
})
});

Upvotes: 0

Views: 129

Answers (2)

epascarello
epascarello

Reputation: 207501

Every time you click on the li, you add more click events to all the elements.

  • 1st click - one click event added
  • 2nd click - Add new click PLUS you have the 1st click
  • 3rd click - Add new click PLUS you have the 2nd click and the 1st click

That is why it is a bad idea to add click events inside of click events.

Upvotes: 1

Roy
Roy

Reputation: 1967

.append() will keep adding elements every time it runs. You need to remove() the old element before appending a new one.

Do this:

$('.gallery').remove();  // add this line
var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
var controls = '<span class="previmg"></span><span class="nextimg"></span>';
$(gallery).appendTo("body");

Upvotes: 1

Related Questions