предотвратить события нажатия на toggleClass

Question

У меня есть событие щелчка на «а» элемента:

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

Я приложил событие щелчка к этому элементу:

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

При нажатии на кнопку редактирования вызывается функция editRow. Эта функция изменяет Edit < а> элемент:

$(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"); 

Я попробовал несколько вещей, и другие вещи. Но что происходит, после нажатия кнопки «Сохранить» изменения изменяются, но сразу же он возвращается обратно для сохранения.

Похоже, что событие click из части $ (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/