Question

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

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');
            });
        }
    });
});​

Answer 1

Try this http://jsfiddle.net/bpD8B/4/

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