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()，则可以将它们分成多个处理程序。

然后，其中一个可以在第一次使用后删除（使用jQuery的.one()将为您覆盖），仍然使用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()也会被.unbind('click')移除，所以在第二次点击时，元素上没有任何函数可以调用它。

Answer 2

取消绑定处理程序后，该按钮将在任何后续点击时正常运行，并启动导航。所以你最好设置一下disabled属性：

$(".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()确实有效。只有在第二次点击时你才会遇到问题，因为链接仍然是可点击的，但是你的功能与它分离了，所以你无法控制第二次点击。

如何防止默认和禁用href

2 个答案: