添加两个click事件相同的按钮只能使用一次

基本上我试图让一个按钮能够处理元素的编辑。我希望它这样，当我点击Edit按钮，它改变了文本Save Changes，并增加了一个类，然后将按钮绑定到另一个click事件，这样当他们点击Save Changes，它会提醒Saved和更改文本回到Edit。它完美地完成了一次。如果你继续尝试这样做，它不会再添加课程或更改文本。添加两个click事件相同的按钮只能使用一次

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

}）;

来源

2012-04-16 bob_cobb

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

来源

2012-04-16 05:10:59 qw3n

男人。我应该在一开始就这样做。虽然我认为我只是使用一个类而不是检查文本（）的值。非常感激。 – 2012-04-16 05:30:25

@bob_cobb，添加类是不是一个坏主意，特别是当你试图改变风格了。 – Starx 2012-04-16 05:31:06

你永远不调用关闭（后加回原来的处理程序），从而消除它。

话虽这么说，它可能是更容易有两个按钮，用适当的点击处理，然后用隐藏（）和show（）交替哪一个是可用的。对于最终用户来说，它应该看起来和行为完全一样，而对于你来说，编写代码很麻烦。

实施例：http://jsfiddle.net/VgsLA/

我认为在最后，这种代码是更健壮的和可管理的。

来源

2012-04-16 05:08:02

嗯...有趣采取此。这与添加一个类并仅检查该按钮是否具有类相比有什么好处？ – 2012-04-16 05:37:55

因为实际上他们*是*两个不同的按钮。他们有不同的标签/文字，他们有不同的功能和代码。他们唯一的共同点就是地点。那么为什么改变每次点击的文字和功能呢？我认为这种方式不太可能发生错误。 – 2012-04-16 05:47:44

这仅仅是一个逻辑问题。与$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

来源

2012-04-16 05:28:23 Starx

添加两个click事件相同的按钮只能使用一次

回答

相关问题