选中复选框后删除链接

Question

我有一个带有Datatable插件的表,当用户点击row(tr)时他会将其重定向到该链接.但我不希望用户在单击行上的复选框时被重定向到链接.这是html:

 <tr class="odd gradeX">
   <td class="number_elem_lang">
      <label class='with-square-checkbox2-mylist-details'>
      <input type='checkbox'>
      <span></span>
      </label>
   </td>
   <td class=""> ID022ox</td>
   <td class="list-name">First Lipsum List</td>
   <td class=""> 22 Candidates</td>
   <td class="">01 Apr 2016</td>
   <td><a href=""></a></td>
</tr>

这是我的javascript代码,用于在点击用户时将用户重定向到链接:

$('#sample_1').on( 'click', 'tr', function() {
  var $a = $(this).find('a').last();
  if ( $a.length )
     window.location = $a.attr('href');
  } );

因此,当单击复选框时,我不想重定向用户,请帮助:)

谢谢

Answer 1

您可以e.target用来检查用户点击的元素.在下面的示例中,我们检查用户是否单击了某个input类型checkbox.然后我们不运行其余的功能.

$('table').on( 'click', 'tr', function(e) {
    var target = $(e.target);
    debugger; // For debugging purposes.
    if (target.is('input[type=checkbox]')) {
        // Do not continue if it's an input
        console.log('no redirect');
        return true;
    }
    console.log('do redirect');
    var $a = $(this).find('a').last();
    if ( $a.length )
       window.location = $a.attr('href');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
   <td class="number_elem_lang">
      <label class='with-square-checkbox2-mylist-details'>
      <input type='checkbox'>
      <span></span>
      </label>
   </td>
   <td class=""> ID022ox</td>
   <td class="list-name">First Lipsum List</td>
   <td class=""> 22 Candidates</td>
   <td class="">01 Apr 2016</td>
   <td><a href=""></a></td>
</tr>
</table>

更新:

在这个特殊情况下,复选框有一些自定义样式,这导致了e.target一个span.解决方案是将条件更改为$(e.target).is('span'),甚至更好地设置span和使用类$(e.target).hasClass('my-custom-checkbox').