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

时间:2014-02-25 22:49:40

标签: javascript jquery

以下是代码:

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

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

除了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*/
    });
});

显然这是一种解决方法,我不打算这样做,它只是有用的东西:)