防止toggleClass

Question

單擊事件我有一個click事件的 「A」 元素：

<a href="#" class="edit-row">Edit</a> 

我已經附上點擊事件給這個元素：

$(document).on('click', "a.edit-row", editRow); 

當點擊編輯按鈕editRow函數被調用。此功能改變編輯< a>元素：

$(this).find("a.edit-row").html("Save").removeClass("edit-row").addClass("save-row").off('click').click(saveRow); 

這一切工作正常。

當點擊「保存」時調用saveRow函數。在此功能中，我想恢復到「編輯」按鈕。

這是我用來實現這一目標的版本之一：

$(this).off('click').html("Edit").toggleClass("save-row").toggleClass("edit-row"); 

我已經試過幾件事情其他事情也是如此。但是，點擊保存後會發生什麼變化以進行編輯，但是會立即變回保存。

它看起來像$（document）部件中的click事件被觸發。但是，我似乎無法禁用或阻止此類點擊事件在更改類時觸發。一旦它被再次點擊，它就需要觸發，而不是在toggleClass（）上。

我在這裏錯過了什麼？

Answer 1

你的問題是，你的點擊處理程序安裝到document然後試圖從this這不是document刪除它，它的點擊a標籤。根據我的理解，您需要刪除document上的點擊處理程序，而不是從this。但是我確實認爲你會在這方面有所作爲，只需要有兩名處理者並將課堂交換出去就很簡單。

Answer 2

我想你已經過了複雜的事情。它看起來像你需要的是兩個獨立的處理程序，一個用於edit-row，另一個用於save-row。你根本不應該刪除點擊處理程序。

$(document).on('click','a.edit-row', function() { 
$(this).toggleClass('edit-row save-row').html('Save'); 
//do other stuff in your editRow function 
}); 

$(document).on('click','a.save-row', function() { 
$(this).toggleClass('edit-row save-row').html('Edit'); 
//do other stuff in your saveRow function 
}); 

你可以在這裏看到一個小提琴的例子。 http://jsfiddle.net/cc9he/

Answer 3

您可以使用類名進行委派來確定要調用哪個函數。

$(function() { 
    $(document).on('click', "a.edit-row", editRow); 
    $(document).on('click', "a.save-row", saveRow); 
}); 

function editRow() { 
    $(this).html("Save").removeClass("edit-row").addClass("save-row"); 
} 


function saveRow() { 
    $(this).html("Edit").removeClass("save-row").addClass("edit-row"); 
} 

http://jsfiddle.net/Z96pp/