Javascript 使用Rails/jQuery-can'；无法使行内的链接正常工作

我正在玩一个Rails 4项目，我成功地完成了它，因此单击表行中的任何位置都可以链接到项目的显示页面（使用jQuery）：

需要包含

event.stopPropagation（）

的第二部分，以阻止行内的链接触发表行单击，因为它们作为子元素存在于表内，如图所示（前两个链接仅转到行单击使用的项目的显示页面）：

问题是，它适用于“编辑”链接（并防止触发前两个链接的额外重定向），但不适用于“销毁”链接-单击它将表现为单击行中的其他任何位置，并将我发送到该项目的显示页面。以下是这两个按钮的相关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

和

data method

属性；我猜这与我自己的js代码不起作用的原因有关。有人能帮我吗

---

请注意，如果我排除了

event.stopPropagation（）

，则在重定向之前，确认框将短暂出现，但目前根本没有弹出框。

我认为问题出在

$（'.table tr'）。单击（function（）{…}）

我的猜测是，这些表是动态加载的，因此您应该使用以下两种方法之一：

$（'.table tr'）。在（'click'，function（）{…}）

或

$（'.table tr'）.live（'click'，function（）{…}）

或者试试这个

为了让事情变得有趣

$('.table tr').on('click', 'a', function(){
    var data = $(this).attr('custom-attr')

    if(data == 'something'){
        //Do something
    }
})

---

我认为问题出在

$（'.table tr'）。单击（function（）{…}）

我的猜测是，这些表是动态加载的，因此您应该使用以下两种方法之一：

$（'.table tr'）。在（'click'，function（）{…}）

或

$（'.table tr'）.live（'click'，function（）{…}）

或者试试这个

为了让事情变得有趣

$('.table tr').on('click', 'a', function(){
    var data = $(this).attr('custom-attr')

    if(data == 'something'){
        //Do something
    }
})

---

经过更多的搜索，我终于找到了我遇到的那个。显然，由于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）”）

表达这种情况的最佳或最优化的方式？

经过更多的搜索，我最终找到了我遇到过的方法。显然，由于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）”）

表达这种情况的最佳或最优化的方式？

使用

.on

没有区别。查看了JSFIDLE并尝试了相同的语法，但也没有什么不同

.live

只是破坏了功能，因此按钮工作正常，但单击行却没有。使用上的

.on没有区别。查看了JSFIDLE并尝试了相同的语法，但也没有什么不同
.live
只是破坏了功能，因此按钮工作正常，但单击行却没有。