javascript - 即使在 jQuery 脚本中执行 element.preventDefault() 后， anchor 标记也会跟随 url

Question

我正在尝试使用 jQuery 删除一个元素。一切正常，但由于一些奇怪的原因，即使在脚本中执行 element.preventDefault() 后，删除目标后 anchor 标记也会跟随 href 并给出 ActiveRecord::RecordNotFound 错误。我知道该记录已被删除，因此在尝试打开该页面后会出现 ActiveRecord::RecordNotFound 错误。但我不明白我还能做些什么来阻止它访问任何页面。

<% if current_user == @habit.user %>
  <% habit_id = @habit.id %>
  <% goal_id = goal.id %>
  <a href="/habits/<%= habit_id %>/goals/<%= goal_id %>" data-confirm="Destroy <%= goal.name %>?" data-method="delete" class="jquery-postback" rel="nofollow">Delete Goal</a>
<% end %>



<script>
$(function() {
$(".jquery-postback").on('click', function(element) {
    element.preventDefault();

    var $this = $(this);

    $.post({
        type: $this.data('method'),
        url: $this.attr('href')
    }).success(function (data) {
        alert('success');
    });
    });
});
</script>

我尝试使用脚本和 anchor 标记进行了很多尝试，但找不到任何解决方案。有解决此错误的建议吗？

ps:此功能允许用户从习惯显示页面删除目标。

Answer 1

您可以为禁用的链接创建一个带有pointer-events: none的类:

.disable-link{
    pointer-events: none;
}

并将此类应用于元素。