바인드 해제 ('클릭') 후 클릭 이벤트를 "다시 바인딩"하는 방법은 무엇입니까?

Question

나는 앵커 태그 <a class="next">next</a>을 "버튼"으로 만들었습니다. 때로는 표시 할 내용이 없으면이 태그를 숨길 필요가 있습니다. .hide()를 사용하여 버튼을 숨기고 .show()를 사용하여 버튼을 다시 표시하면 모두 올바르게 작동합니다. 하지만 대신 .fadeIn() 및 .fadeOut()을 사용하려고했습니다.

내가 겪고있는 문제는 사용자가 fadeOut 애니메이션 중에 버튼을 클릭하면 쇼를 실행하는 로직에 문제가 발생할 수 있다는 것입니다. 내가 찾은 해결책은 원래 클릭 기능이 시작된 후 버튼에서 클릭 이벤트를 바인딩 해제 한 다음 애니메이션이 완료된 후 다시 바인딩하는 것이 었습니다.

$('a.next').click(function() { 
    $(this).unbind('click'); 
    ... 
    // calls some functions, one of which fades out the a.next if needed 
    ... 
    $(this).bind('click'); 
} 

위의 예의 마지막 부분이 작동하지 않습니다. 클릭 이벤트는 실제로 앵커에 다시 바인딩되지 않습니다. 누구든지 이것을 달성하기위한 올바른 방법을 알고 있습니까?

저는 독학 jquery 사람입니다. 그래서 unbind()와 bind()와 같은 상위 수준의 것들이 제 머리 위에 있고, jquery 문서는 제가 이해하기에 충분히 단순하지 않습니다.

Answer 1

난 그냥 처음 애니메이션 것 있는지 확인하기 위해 검사를 추가 : 당신은 클릭 이벤트를 바인딩 할 때, 당신은 모든 것을 시작하고

$('a.next').click(function() { 
    if (!$(this).is(":animated")) { 
     // do stuff 
    } 
}); 

Answer 2

. 이벤트를 처리 할 함수를 제공해야합니다. jQuery는 사용자가 "바인딩 해제"를 호출 한 후에 해당 내용을 기억하지 않습니다.

이 특별한 경우에는 좀 더 복잡합니다. 문제는 그 애니메이션을 시작할 때 타이머에 의해 작동되는 일련의 동작을 동작으로 설정한다는 것입니다. 따라서 클릭 핸들러 자체 내에서 "클릭"핸들러를 바인딩 해제하고 다시 바인딩 정말 아무 도움이되지 않습니다. 어떤 이일까요? (is(":animated") 트릭으로 문제를 해결하고 싶지 않다면) 핸들러를 바인딩 해제 한 다음 애니메이션의 "finish"콜백에서 다시 바인딩하는 것이 좋습니다.

사용자가 설정하면 처음부터 핸들러는, 당신은 ") (클릭"에 대한 호출에서 함수의 선언을 분리 할 수 ​​있습니다 "를 클릭"

var handler = function() { 
    $(this).whatever(); 
}; 
$('a.next').click(handler); 

를 그리고, 당신이 원하는 결국합니다 바인드 해제/다시 바인드하려면 동일한 방법으로 "클릭"하고 "핸들러"함수를 참조하는 호출을 반복 할 수 있습니다.

Answer 3

당신이 다음 바인딩이 클래스를 제거 바인딩을 해제하려면

객체에 클래스를 추가하는 것입니다 (/ 때어 방법 바인드를 사용하지 않고) 간단하고 짧은 솔루션 전의;

$('#button').click(function(){ 
    if($(this).hasClass('unbinded')) return; 
    //Do somthing 
}); 

$('#toggle').click(function(){ 
    $('#button').toggleClass('unbinded'); 
});