将两个点击事件添加到同一个按钮只能工作一次答案

【问题标题】：Adding two click events to the same button only works once将两个点击事件添加到同一个按钮只能工作一次
【发布时间】：2012-04-16 05:05:48
【问题描述】：

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

Here is a demo on 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');
        });
    }
});

});

【问题讨论】：

标签： javascript javascript-events jquery

【解决方案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');
        }
    });
});

【讨论】：

男人。我一开始就应该这样做。虽然我认为我将只使用一个类而不是检查 text() 的值。非常感谢。
@bob_cobb，添加类不是一个坏主意，特别是当您也尝试更改样式时。

【解决方案2】：

你永远不会在调用 off() 后添加回原来的处理程序，它会删除它。

话虽如此，拥有两个按钮和适当的点击处理程序可能更容易，然后使用 hide() 和 show() 来交替使用哪个按钮。对最终用户而言，它的外观和行为应该完全相同，而对您而言，编写代码就不会那么令人头疼了。

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

我认为最后，这段代码更加健壮和易于管理。

【讨论】：

嗯...有趣的观点。与添加类并仅检查按钮是否具有类相比，这样做有什么好处？
因为实际上它们是两个不同的按钮。它们具有不同的标签/文本，并且具有不同的功能和代码。他们唯一的共同点就是位置。那么为什么要在每次点击时更改文本和功能呢？我认为这种方式不太容易出现可能的错误。

【解决方案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

【讨论】：