javascript - 更改类后jquery继续选择元素

Question

我有一个按钮，它必须在满足某些条件后改变它的行为。

所以我按类选择按钮，我想在满足条件时删除该类，并向该元素添加一个新类，然后用它做其他事情。但它不工作。

我只是为我的问题编了一个例子。

这是代码:

$('.button-1').click(function(){
    $('.box').width(function(){
        return $(this).width() + 10;
    });
    $(this).removeClass('button-1').addClass('button-2');
});
$('.button-2').click(function(){
    $('.box').width(function(){
        return $(this).width() - 10;
    });
    $(this).removeClass('button-2').addClass('button-1');
});

它是 Fiddle

我希望这会在增加和减少黑框宽度之间切换，但它一直在增加。

Answer 1

那是因为事件是静态绑定(bind)在按钮上的，像这样使用事件委托(delegate):

$(document).on('click','.button-1', function(){
    $('.box').width(function(){
        return $(this).width() + 10;
    });
    $(this).removeClass('button-1').addClass('button-2');
});
$(document).on('click','.button-2', function(){
    $('.box').width(function(){
        return $(this).width() - 10;
    });
    $(this).removeClass('button-2').addClass('button-1');
});

DEMO