我在使用 event.preventDefault(); 时遇到问题获取我的 DOM 上的 ahref

Question

我在 DOM 上使用 event.preventDefault(); 作为 ahref 时遇到问题。

如何防止 url 发布 nofollow 删除（如使用 JQuery 的 HTML 指定的那样）？

<td class="trash_can">
<a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure you want to delete Greek Theater at U.C. Berkeley?" href="/promotions/2/places/46">
<img id="trash_can" src="http://test.dev/images/trash.png?1305741883" alt="Trash">

以下代码应该会破坏 HTML，但 HTML 在发出“您确定吗”警告之前发布删除操作。没有什么不工作：

  $(function(){
  $('.trash_can a').click(function(event) {
    event.preventDefault();
    console.log('Clicked Delete');
  });
});

Answer 1

您可能不仅需要 event.preventDefault()，还需要执行 return false。 PreventDefault() 会阻止默认操作，但事件仍然会冒泡，可能会到达下一个处理程序，这可能是 Fredrik 指出的 Rails 处理程序：

 $(rails.linkClickSelector).live('click.rails', function(e) {
    var link = $(this);
    if (!rails.allowAction(link)) return rails.stopEverything(e);

    if (link.data('remote') !== undefined) {
      rails.handleRemote(link);
      return false;
    } else if (link.data('method')) {
      rails.handleMethod(link);
      return false;
    }
  });

Answer 2

你用的是导轨吗？看起来是这样。

event.preventDefault() 不起作用的原因是因为魔法是在其他地方完成的。
Rails 附带了一些帮助程序，可以为 Rails 生成的所有“删除”操作创建事件处理程序。因此，就您的情况而言，我认为您需要找出如何覆盖帮助程序，或者只是为该特定删除操作创建自定义事件处理程序。

这是 Rails 使用的 JQuery 代码：

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

基于此（来自链接）：

linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote]'

如果您删除 data-remote，您的事件处理程序将是唯一执行的事件处理程序，来自链接的data-method 和data-confirm。

因此，我建议您删除它们，然后在您自己的点击处理程序中重新创建您想要的任何行为。

Answer 3

我遇到了同样的问题，但在打破了我的头几个小时后未能得到任何好的解决方案。因此，根据此处建议的答案，我做了类似的事情：

function enableLink() {
  jQuery("#link_id").removeClass("disabled");
  jQuery("#link_id").attr("data-remote", true);
}


function disableLink() {
  jQuery("#link_id").addClass("disabled");
  jQuery("#link_id").removeAttr("data-remote");
}

jQuery(document).ready(function(){
  jQuery(document).on("click", "disabled", function(e){
    e.preventDefault();
  });
});

我承认这不是一个好的解决方法。但是，这就是对我的帮助。

Answer 4

这是一个老问题，但如果您将 Rails 5.1+ 与 vanilla UJS 而不是 jQuery 一起使用，则 event.preventDefault() 或从该方法返回 false 都不会停止 Rails -ujs 处理它。您需要显式调用 Rails.stopEverything(事件)

$('.trash_can a').click(function(event) {
  Rails.stopEverything(event);
  console.log('Clicked Delete');
});