的jQuery：函数调用两次导致奇怪的行为

Question

我有以下的jQuery用于改变下拉菜单：

function getStatus(item) { 
    return $(item).hasClass("active") 
} 

$(document).on("page:change", function() { 
    $(".nav-element.parent").click(function(e) { 
     el = $(this) 
     if (getStatus(el)) { 
      $(this).toggleClass("active") 
      $(this).find(".nav-child-element").slideToggle() 
     } else { 
      $(".nav-element.parent").removeClass("active") 
      $(".nav-child-element").slideUp(); 
      $(this).addClass("active") 
      $(this).find(".nav-child-element").slideDown(); 
     } 
    }) 
}); 

和功能的正常使用，除非我导航到另一个页面，然后回去，使用浏览器返回键。然后当我点击$(".nav-element.parent")元素时，循环会有效地打开下拉菜单两次。

奇怪的是，当我将$(".nav-element.parent").click(function(e) {行更改为$(document).on("click", ".nav-element.parent", function(e) {时，循环出现3次。我不知道如何解决这个问题，最后加入e.stopPropagation();没有任何效果。

Answer 1

您需要调用.off方法以在再次分配之前移除先前的事件侦听器。

function getStatus(item) { 
    return $(item).hasClass("active") 
} 

$(document).on("page:change", function() { 

    $(".nav-element.parent").off().on('click', function(e) { 
     el = $(this) 
     if (getStatus(el)) { 
      $(this).toggleClass("active") 
      $(this).find(".nav-child-element").slideToggle() 
     } else { 
      $(".nav-element.parent").removeClass("active") 
      $(".nav-child-element").slideUp(); 
      $(this).addClass("active") 
      $(this).find(".nav-child-element").slideDown(); 
     } 
    }) 
});