下面的代碼:爲什麼我的方法執行兩次?
$(document).ready(function() {
$('.category').click(function(){
$("#category-menu").modal();
$("#category-menu").css({'display' : 'block'});
$('.single-category').click(function(){
$('.category-link').fadeOut('slow', 'linear', fadeInCategory($(this)));
/*the line above some how gets called again*/
});
});
$('.mp-back').click(function(){
$('.category-link').css('display', 'none');
var testing = $(this).closest('.mp-level');
testing.css('display', 'none'); /*after this line */
});
});
function fadeInCategory(category){
category.find('.mp-level').fadeIn('slow');
category.find('ul').fadeIn('slow');
}
function back2allCategories(){
$('.category-link').css('display', 'block');
}
當$('.single-category')
點擊我淡出了一堆的HTML,並在短短這個孩子褪色。
mp-back
應該回遷,所以我淡出(或設置display:none
作爲一個屬性)
然而,一旦$('.mp-back').click(function(){
已經執行完畢,這條線:
$('.category-link').fadeOut('slow', 'linear', fadeInCategory($(this)));
不知怎的,它再次被執行,我可以不知道爲什麼。
(我知道這是通過在谷歌Chrome控制檯中的折點發生)
但是我無法真正弄清楚爲什麼。
爲什麼$('.category-link').fadeOut('slow', 'linear', fadeInCategory($(this)));
被重新調用?
你應該幾乎從不調用裏面綁定另一個事件處理函數的事件處理函數。每次你點擊'.category'你爲'.single-category'綁定一個額外的點擊處理器,所以你最終得到了多個處理器。 – Barmar
嗯..這是有道理的...是這個問題,還是隻是良好的做法? – brendosthoughts
這就是問題所在。 –