添加兩個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事件相同的按鈕只能使用一次

回答

相關問題