将两个点击事件添加到同一按钮仅一次

Question

基本上，我试图使按钮能够处理元素的编辑。 我想要它，以便当我单击“ Edit按钮时，它将文本Save Changes为“ Save Changes并添加一个类，该类随后将按钮绑定到另一个单击事件，以便当他们单击“ Save Changes ，它将警告Saved并更改文字回到Edit 。 它会完美地执行一次。 如果您继续尝试这样做，它将不再添加类或更改文本。

这是jsfiddle上的演示

编码：

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

试试这个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');
        }
    });
});

Answer 2

您永远不会在调用off（）后再添加原始处理程序，从而将其删除。

话虽如此，拥有两个带有适当单击处理程序的按钮，然后使用hide（）和show（）来交替选择哪个按钮可能更容易。 对于最终用户而言，它的外观和行为应该完全相同，并且对您而言，编写代码的麻烦将大大减轻。

示例： http ： //jsfiddle.net/VgsLA/

我认为最终，此代码更加健壮和易于管理。

Answer 3

这只是一个逻辑问题。 并通过$that.off('click').on('click', $that, function() {委托给自己，这不是您应该做的。

这是使用您的代码的解决方案：

$(function() {

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

});​

演示