Question

我有一行用户输入事务。在事务的索引页面（列表）上，我希望允许用户将鼠标悬停在表格行上并单击它以打开/编辑。我用Javascript（ofcourse：）

做到这一点

$('.transaction-row').on('click', function(e) {
  window.location.href = '/transactions/'+$(this).data('id')+'/edit';
  return false;
});

这很好用，当用户点击该行时，它会将它们带到编辑页面。

问题是我在行中还有一个删除按钮，我想留在那里。

<%= link_to transaction, method: :delete, data: { confirm: 'Are you sure?' } do %>
  Delete
<% end %>

因此，当我点击它时，它会冒泡到行并打开编辑页面。我以为我会用Javascript处理它并使用“return false”来防止冒泡，但是我不能发送“DELETE”HTTP动作 - 或者至少我不知道如何。

我使用jQuery尝试了这个：

$('.delete-transaction-link').on('click', function(e) {
  if(confirm('Are you sure?')) {
    var url = '/transactions/'+$(this).data('id');
    $.ajax({
        url: url,
        type: "DELETE"
    }).done(function(){
        window.reload();
    });
  }
  return false;
  e.preventDefault(); // Prevent link from following its href
});

..但是浏览器给了我一些警告提醒，告诉我“此网页被重定向到新位置。您要将您输入的表单数据重新发送到新位置吗？” - 不理想

任何人都可以告诉我如何做到这一点。我不太熟悉将HTTP操作/方法（例如DELETE）放入链接或轨道。谢谢你的帮助。

Answer 1

您的preventDefault()永远不会被调用，因为它放在return语句之后。切换这两行，事件应该在到达行的处理程序之前被捕获。

$('.delete-transaction-link').on('click', function(e) {
  // ... your ajax stuff

  e.preventDefault(); // Prevent link from following its href
  return false;
});

但是，ajax的要点是页面不会完全重载。在您的情况下，您在删除操作完成时重新加载页面。相反，您通常可以链接到此操作，然后从Rails控制器重定向回列表页面，而不使用ajax。

如果您仍想使用ajax，则应该使用Javascript删除（或至少隐藏和禁用）已删除的行。

在Rails中删除行时发生事件冒泡的问题

1 个答案: