내가 "A"요소에 클릭 이벤트를 toggleClass

Question

에 클릭 이벤트를 방지 editRow 함수가 호출됩니다. 이 함수는 편집 <> 요소를 변경합니다.

$(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/