jquery - 如何使 Bootstrap 可点击行对特定列不可用？

Question

我正在使用 bootstrap 并且那里有一个可点击的行。单击该行时，将打开一个模型。如下所示。

<tr class='clickable-row' data-toggle="modal" data-target="#editModal" style="cursor:pointer">

但是在这一行中，有一列包含一个按钮。问题是按钮被点击了，但由于整行都是可点击的，所以 model 首先被打开，然后按钮的命令被执行。

下面是按钮栏。

<td>
  <form>
     <label>
         <input type="submit" name="buttonActDea" id="button" class="btn btn-primary" value="Activate">
      </label>
   </form>
</td>    

如何使“可点击行”功能仅对按钮列不可用？

Answer 1

您可以使用 jquery 的 stopPropagation();

$('#button').on('click',function(e) {
    //button function

    e.stopPropagation();
})

或者删除数据属性，这样如果 tr 有一个 button 子元素，它的点击事件就不会被触发

$( document ).ready(function() {
   $('.clickable-row').each(function () {
   if ( $(this).find('#button').length)
     {
       $(this).removeAttr('data-toggle').removeAttr('data-target');
     }
   });
});