Q:

jquery keeps on selecting element after changing the class

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.

A:

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

