javascript - 使用 Rails/jQuery 的可点击表格行 - 无法正常工作的行内链接

Question

我正在玩一个 Rails 4 项目，我成功地实现了它，因此单击表行中的任意位置将链接到项目的显示页面(使用 jQuery):

$(document).ready(function() {
  // Make table rows clickable
  $(".table tr").click(function() {
    var href = $(this).find("a").first().attr("href");
    if(href) {
      window.location.href = href;
    }
  });
  // Stops links from triggering the tr click???
  $("a").click(function(event) {
    event.stopPropagation();
  });
});

需要包含带有 event.stopPropagation() 的第二部分，以阻止行内的链接也触发表行单击，因为它们作为子元素存在于其中，如下所示(前两个链接只是转到该项目的显示页面，这是行单击所使用的):/image/3VmSF.jpg

问题是，它适用于“编辑”链接(并防止触发前两个链接的额外重定向)，但不适用于“销毁”链接 - 单击它就像我单击中的其他任何地方一样行并将我发送到该项目的显示页面。以下是这两个按钮的相关 HTML 输出:

<tr>
  ...
  <td><a class="btn btn-default btn-xs" href="/foods/2603/edit">Edit</a></td>
  <td><a class="btn btn-danger btn-xs" data-confirm="Are you sure?" data-method="delete" href="/foods/2603" rel="nofollow">Destroy</a></td>
</tr>

现在我知道 Rails 有自己的 Javascript 函数来弹出确认框并发送 DELETE 请求，我猜这就是为什么它有那些 data-confirm 和 数据方法属性；我的猜测是，这与为什么我自己的 js 代码不起作用有关。有人可以帮我吗？

请注意，如果我排除 event.stopPropagation()，那么在我重定向之前，确认框将会出现非常短暂，但实际上根本不会弹出任何框。

Answer 1

经过更多搜索，我最终找到了 this Github issue这似乎是我遇到过的一个。显然，由于 Rails(特别是 jquery-ujs)的工作方式，根本问题是无法解决的，但是提供了一种解决方法，经过一番尝试后我能够适应我的情况:

$(document).ready(function() {
  // Make table rows clickable
  $(".table tr").on('click', function(event) {
    var target = $(event.target);
    if (target.is(":not(a)")) {
      var href = $(this).find("a").first().attr("href");
      if(href) {
        window.location.href = href;
      }
    }
  });
});

现在基本上，如果我单击表格行，它会首先检查所单击的元素是否不是 a 元素(即还不是链接)，然后才发送给用户到商品页面。如果它是一个链接，Javascript 将停止并且该链接具有其正常行为。看起来工作正常。

最后一个简单的问题是，if (target.is(":not(a)")) 是表达该条件的最佳或最优化的方式吗？