Divs добавляются экспоненциально с добавлением funcion в JQuery

Question

У меня есть jquery lightbox, но навигация не работает. Я добавил лайтбокс с функцией append в тег body, но когда я нажимаю на следующую стрелку, ярлык, добавленный в тег body, умножается. Сначала я вижу следующий пункт, но после этого я получил четвертый. Я получил эту строку: 1,2,4,8,16.

Что нужно изменить в функции, которая добавляет только один ярлык в тег тела?

$(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(); }); 
     } 
    } 
}) 
}); 

Answer 1

.append() будет продолжать добавлять элементы при каждом запуске. Вам нужно добавить remove() старый элемент перед добавлением нового.

ли это:

$('.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"); 

Answer 2

Каждый раз, когда вы нажимаете на литий, добавьте больше кликов события для всех элементов.

• первый щелчок - событие один щелчок добавил
• второй клик - Добавить новый щелчок PLUS у вас есть 1-й CLICK
• 3-й щелчок - Добавить новый щелчок PLUS у вас есть 2-ой щелчок и 1-й щелчок

Вот почему плохая идея добавлять события кликов внутри событий кликов.