javascript - 如何防止默认和禁用 href

Question

第一次单击我的按钮时，单击功能可以正常工作，但再次单击时，它会刷新页面，单击时无法识别取消绑定(bind)。我需要防止任何默认点击事件并在点击后禁用按钮。

<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') 删除，因此元素上没有留下任何函数第二次点击时调用它。