Странное поведение Javascript

Question

У меня есть следующий код на моей странице, и после pagereload он работает нормально, но без перезагрузки этот скрипт не будет работать так, как предполагалось.

1-я польза: работает довольно хорошо
2-ая польза: почему она прыгает через 1 класс?
3-е использование: оно перепрыгивает через 2 класса

Как обновить сценарий без перегрузки страницы или что мне нужно сделать?

$(document).ready(function(){ 

$('.partImg').each(function(){ 
     $(this).click(function(){ 
      $("#hideMod, #visMod, #nextP, #closeP, #prevP").fadeIn(400); 
      $(this).next().addClass("ASert"); 
      var AV = $(".ASert").text(); 
      $('#visMod').html("<img src='" + AV + "'/>"); 

      $("#nextP").click(function(){ 
       if ($('.hidePart:last').hasClass("ASert")) { 
        $('.hidePart:first').addClass("ASert"); 
        $('.ASert').last().removeClass("ASert"); 
       } else {   
        $('.ASert').next().next().addClass("ASert"); 
        $('.ASert').first().removeClass("ASert"); 
       } 
       var AV = $(".ASert").text(); 
       $('#visMod').html("<img src='" + AV + "'/>"); 
      }); 

      $("#prevP").click(function(){ 
       if ($('.hidePart:first').hasClass("ASert")) { 
        $('.hidePart:last').addClass("ASert"); 
        $('.ASert').first().removeClass("ASert");   
       } else {   
        $('.ASert').prev().prev().addClass("ASert"); 
        $('.ASert').last().removeClass("ASert");   
       } 
       var AV = $(".ASert").text(); 
       $('#visMod').html("<img src='" + AV + "'/>"); 
      });   

      $("#closeP").click(function(){ 
       $("#hideMod, #visMod, #nextP, #closeP, #prevP").fadeOut(200); 
       $(".ASert").removeClass("ASert"); 
      }); 
     }); 
    }); 
}); 

http://istyle.kz/test/index.php?id=32 здесь вы можете найти что касается вопросов.

1. Нажмите на любое изображение и попытаться prev/next
2. Закрыть LightBox
3. Нажмите снова на изображение и попытаться prev/next

Answer 1

Это довольно распространенная проблема, с помощью JavaScript. Внутри обработчика кликов вы привязываете другой обработчик кликов. Если это необходимо, необходимо выполнить развязывание.

Однако, это не кажется необходимым. Поэтому я бы предложил рефакторинг кода таким образом:

$(function(){ 
    $("#nextP").on("click", function(){ 
     //... 
    }); 
    $("#prevP").on("click", function(){ 
     //... 
    }); 
    $("#closeP").on("click", function(){ 
     //... 
    }); 
    $('.partImg').on("click", function(){ 
     $("#hideMod, #visMod, #nextP, #closeP, #prevP").fadeIn(400); 
     //... 
    }); 
}); 

Надеюсь, это поможет.