href를 금지 및 비활성화하는 방법

Question

첫 번째 클릭에서 내 버튼 클릭 기능이 작동하지만 다시 클릭하면 바인딩 해제가 인식되지 않음을 클릭하면 페이지가 새로 고침됩니다. 클릭 후 버튼을 비활성화 할뿐만 아니라 모든 기본 클릭 이벤트를 방지해야합니다.

<a href="" class="red-btn2">Save this Property</a> 

$(".red-btn2").click(function(event){ 
    event.preventDefault(); 
    $(this).unbind('click'); 
    $(this).css({ 
    'background-color':'#666666', 
    'text-align':'center' 
    }); 
    $(this).text("Added to Favorites"); 
}); 

Answer 1

한 번만 실행 핸들러의 휴식이 필요하면

하지만 preventDefault() 항상 여러 핸들러로 분리 할 수 ​​있습니다. 당신이 그것을 가지고

$('.red-btn2') 
    .click(function (event) { 
     event.preventDefault(); 
    }) 
    .one('click', function() { 
     $(this).css({ 
     'background-color':'#666666', 
     'text-align':'center' 
     }); 
     $(this).text("Added to Favorites"); 
    }); 

에서, event.preventDefault()가되고있다 :

그런 다음, 그 중 하나는 여전히 사용중인 preventDefault()를 떠나, (jQuery의 .one() 당신을 위해 그것을 다룰 것 사용) 처음 사용 후 제거 할 수 있습니다 또한 .unbind('click')까지 제거되었으므로 요소에 두 번째 클릭을 위해 호출 할 함수가 없습니다.

Answer 2

핸들러를 바인딩 해제하면 이후의 클릭시 버튼이 정상적으로 작동하고 탐색이 시작됩니다. event.preventDefault() 실제로 작동

$(".red-btn2").click(function(event){ 
 
    event.preventDefault(); 
 
    if ($(this).prop('disabled')) return; // <--- 
 
    $(this).prop('disabled', true); // <---- 
 
    $(this).css({ 
 
    'background-color':'#666666', 
 
    'text-align':'center' 
 
    }); 
 
    $(this).text("Added to Favorites"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="red-btn2">Save this Property</a>

참고 : 그래서 당신은 더 나은 정말 장애인 속성을 설정합니다. 링크를 클릭 할 수 있었기 때문에 문제가 발생한 두 번째 클릭에서만 발생했지만 기능이 분리되어 두 번째 클릭을 제어 할 수 없었습니다.