Basically I'm trying to make a button be able to handle editing of an element. I want it so that when I click on the `Edit` button, it changes the text to `Save Changes` and adds a class which will then bind the button to another click event so that when they click `Save Changes`, it'll alert "Saved!" and change the text back to `Edit`. It does this perfectly once. If you continue to try to do it, it simply won't add the class or change the text anymore.

[Here is a demo on jsfiddle](http://jsfiddle.net/bpD8B/1/)

The code:

```
$(function() {
    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        $that.text('Save Changes');
        $that.addClass('js-editing');
        if ($that.hasClass('js-editing')) {
            $that.off('click').on('click', $that, function() {
                alert('Saved!');
                $that.text('Edit');
                $that.removeClass('js-editing');
            });
        }
    });
});​

```