向同一按钮添加两次单击事件只能工作一次

Adding two click events to the same button only works once

本文关键字：事件 工作 一次 单击 两次 添加 按钮      更新时间：2023-09-26

基本上，我试图使一个按钮能够处理元素的编辑。我希望它，当我单击"编辑"按钮时，它将文本更改为"保存更改"并添加一个类，该类然后将按钮绑定到另一个单击事件，以便当他们单击"保存更改"时，它会提醒"已保存！"并将文本更改回编辑。它完美地完成了一次。如果您继续尝试这样做，它根本不会再添加类或更改文本。

这是一个关于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');
            });
        }
    });
});​

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

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

话虽如此，使用两个按钮，使用适当的单击处理程序，然后使用 hide（） 和 show（） 交替使用哪个按钮可用可能会更容易。 对于最终用户来说，它的外观和行为应该完全相同，对你来说，编码会少得多。

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

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

这只是一个逻辑问题。有了$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');
        }
    });
});​

演示

相关文章：