Question

如果我两次运行以下程序，click事件永远不会被触发。但是，如果我这样做三次就行了。这是为什么？

function categorychange() {
    $('.card').click(function() {
        $(this).children().children("p").children().toggle();
        $(this).toggleClass('mdl');
        $('.mdl-black').toggle();
    });
}

Answer 1

问题是因为每次向.card元素添加事件处理程序时，您都会向toggle()添加另一个指定元素的调用。当你偶数次切换它回到原来的状态时，似乎没有任何事情发生。

要解决此问题，听起来像委派的事件处理程序更适合您的需求。这样，您可以在页面加载时分配事件处理程序，而不必多次重新绑定同一事件。试试这个：

$(document).on('click', '.card', function(){
    $(this).toggleClass('mdl').children().children("p").children().toggle();
    $('.mdl-black').toggle();
});

或者，您可以使用off()取消绑定现有事件处理程序，然后再绑定categorychange()函数中的新事件处理程序：

function categorychange(){
    $('.card').off().click(function() { // note .off() here
        $(this).toggleClass('mdl').children().children("p").children().toggle();
        $('.mdl-black').toggle();
    });
}

请注意，前一个使用委托事件处理程序的示例是远这里更好的解决方案。

将单个元素绑定两次并不适用于jQuery

1 个答案: