Question

基本上我正在尝试使按钮能够处理元素的编辑。我想要它，以便当我点击Edit按钮时，它会将文本更改为Save Changes并添加一个类，然后将按钮绑定到另一个点击事件，以便在他们点击{{1}时}，它会提醒Save Changes并将文字更改回Saved。它完美地完成了一次。如果你继续尝试这样做，它就不会再添加类或更改文本了。

Here is a demo on jsfiddle

代码：

Edit

}）;

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

});

Demo

将两个单击事件添加到同一按钮仅适用一次

3 个答案: