jQuery更改类后继续选择元素

Question

I have a button which must change what it does after meeting some condition.

So I'm selecting the button by it's class and I want to remove that class upon meeting the condition and add a new class to the element and do something else with it. but it's not working.

I just made up an example for my problem.

this is the code:

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

and it's Fiddle

I expect this to toggle between increasing and decreasing the black box width, but it keeps on increasing.

Answer 1

That's because the event is bound statically on the button, use event delegation like this:

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

Answer 2

Offcourse you could do it like that...but isn't it easier to add an another variable that checks whether or not there has been a click? The code is much simpler and you can check later on whether or not the box has been enlarged.

This method also seperates style from computing, which is generally regarded as a good idea.

var large = false;
$('body').on('click', '.button', function(){

if (large) {
    $('.box').addClass('clicked');
    large = false;
} else {
    $('.box').removeClass('clicked');
    large = true;
}

});

additionally, you need a css class like so:

.clicked {
    width: 110px; 
}

and I removed that button-1 and button-2 classes, gave the div the class 'button' instead