锚标签跟随 url 即使在 jQuery 脚本中执行 element.preventDefault() 之后也是如此

Question

我正在尝试使用jQuery删除一个元素。EVerything工作正常，但由于一些奇怪的原因，即使在脚本中执行element.preventDefault((之后，锚标签在删除目标后跟随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>

我尝试使用脚本和锚标签玩很多，但找不到任何解决方案。有什么建议可以解决此错误吗？

PS：此功能允许用户从习惯显示页面中删除目标。

Answer 1

您可以使用禁用链接pointer-events: none创建类：

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

并将此类应用于元素。

Answer 2

只需执行以下操作：

$("a.jquery-postback").on('click', function(element) {
element.preventDefault();
...
}

不知道为什么，但您需要专门定位a链接标记才能.preventDefault()工作。

Answer 3

我终于找到了解决方案。如果其他人遇到同样的问题，如果您在没有 data-method="delete" 和 rel="nofollow" 的情况下重写锚标记，它将起作用。

像这样的东西....

<a href="/habits/<%= habit_id %>/goals/<%= goal_id %>" data-confirm="Destroy <%= goal.name %>?" class="jquery-postback" >Delete Goal</a>

背后的原因是，Rails附带了一些帮助程序，可以为Rails生成的所有"删除"操作创建事件处理程序。这是 Rails 使用的 JQuery 代码：

https://github.com/rails/jquery-ujs/blob/master/src/rails.js

因此，如果锚标记没有数据远程和数据方法，则事件处理程序将是唯一执行的事件处理程序。