링크 클릭 후 Jquery 클래스가 제거되었지만 두 번째 클릭이 계속 인식됩니다.

Question

약간의 문제가 있습니다. JQuery load() 함수를 사용하여 AJAX를 사용하여 페이지의 내용을로드하려고합니다. 콘텐츠가로드되고 두 번째로 링크가 탭되면 슬라이드/숨기기에 콘텐츠를로드해야합니다. 동일한 링크를 3 번 ​​이상 클릭하면로드 된 내용 표시를 전환해야합니다.로드 된 내용 표시는 이미 한 번로드되었으므로 전환해야합니다.

내 문제는 링크를 한 번 클릭 한 후 loadable 클래스를 제거하지만 두 번째 클릭시 동일한 함수가 클래스가 아직있는 것처럼 실행된다는 것입니다.

<a title="Food" id="food" class="loadable" href="get-taste/food">Food</a> 
<div class="food_load_space"></div> 

링크는 부하와 .food_load_space에 데이터로드를 트리거 : 여기 내 HTML입니다. 그리고 여기 내 JS있다 :. 나는 또한 스크립트가 알 수 있도록 .expanded 클래스와 .loaded 클래스를 추가하는 계획입니다

$(document).ready(function(){ 
    $('a.loadable').click(function(){ //executed upon link click 1; 
    url = $(this).attr('href'); 
    linkid = $(this).attr('id'); 
    toload = url + ' #content-area'; 
    //now, remove loadable, add loaded and expanded 
    $(this).removeClass('loadable'); 
    alert(toload); 
    $('.' + linkid + '_load_space').load(toload); 
    return false; 
    }); //kill loadable 

되는 링크에 있지만 무슨 일하는이 기능의 화재에도 경우입니다 상태 .loadable 수업이 종료되었습니다.

Answer 1

을, 당신은 (수동 unbind에 요소에서 이벤트를 필요로의) 문제의. 이것은 $(this).unbind('click');으로 전화하여 수행 할 수 있습니다.

이벤트 기능에 요소가 클래스를 가지고 있는지 확인할 수도 있습니다.

Answer 2

두 번째 클릭이 인식되는 이유는 jQuery가 이미 동작을 요소에 바인딩했기 때문입니다. 클래스를 제거하기 만하면 이벤트를 바인딩 해제 할 수 없습니다. 클래스는 해당 요소를 선택하고 요소를 스타일 화하는 데 도움이되었습니다.

당신의 클릭 기능으로, 이벤트 바인딩을 제거하려면, 당신은 같은 것을 수행해야합니다 이벤트가 이미 요소에 바인딩 된

$('a.loadable').click(function() { 
    ...your other code... 
    $(this).unbind('click'); 
}); 

Answer 3

핸들러는 선택기가 아니라 요소에 바인딩됩니다.

한 번의 클릭에 대해서만 원할 경우 one()^(docs) 메서드를 사용하여 바인딩합니다.

$('a.loadable').one('click', function(){ 
    // and so on... 

첫 번째 클릭 후 자동으로 언 바운드됩니다.