Question

我有一个带有Datatable插件的表，当用户点击将被重定向到该链接的行（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。然后我们不会运行剩下的功能。

＆＃13;

$('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');
});

＆＃13;

<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>

＆＃13;

<强>更新

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

Answer 2

在这里 - 单击复选框时添加此项以取消事件：

 $("tr input:checkbox").click(function(event) {
     event.stopPropagation();
     // Do something
 });

这是一个有效的演示

$('table').on('click', 'tr', function() {
  var $a = $(this).find('a').last();
  if ($a.length)
    alert("fsfsd");
});

$("tr input:checkbox").click(function(event) {
  event.stopPropagation();
  // Do something
});

<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>

Answer 3

使用if构造

if ($('input.checkbox_check').is(':checked')) {
...
}

Answer 4

StackLayout

选中复选框后删除链接

4 个答案: