如何防止默认并禁用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()是是：

然后，他们可以在第一次使用（使用jQuery的.one()将涵盖你），还是留在使用preventDefault()之后被去除.unbind('click')也被删除，所以元素上没有剩下任何功能来调用它来进行第二次点击。

Answer 2

当您解除绑定处理程序时，该按钮将在任何后续点击上按正常方式运行，并启动导航。所以你最好真正建立残疾人财产：

$(".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>

注意event.preventDefault()实际工作。只有在第二次点击时，您才有问题，因为链接仍然是可点击的，但是您的功能已与其分离，因此您无法控制第二次点击。