Question

以下是代码：

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

Answer 1

每次点击.category，您都会为.category-link分配新的处理程序。继续这么做，你会崩溃浏览器。

极少数情况下，一个事件处理程序应该分配另一个事件处理程序。这不是其中之一;）

Answer 2

除了Niets的答案，你可以使用解开你的点击事件来解决问题，例如。

$('.category').click(function(){
   $("#category-menu").modal();
   $("#category-menu").css({'display' : 'block'});
   // unbind the click before binding it again
   $('.single-category').unbind('click').click(function(){
       $('.category-link').fadeOut('slow', 'linear', fadeInCategory( $(this) ) ); 
        /*the line above some how gets called again*/
    });
});

显然这是一种解决方法，我不打算这样做，它只是有用的东西：）

为什么我的方法执行了两次？

2 个答案: