Question

$('#NewClientsTable').on('click', 'tr', function (e) { 
    var $r= $(this).closest('tr');

    if ($r.find('input[type=checkbox]').eq(0).is(':checked'){
         // Do Stuff
    } else { // Do Stuff }
});

在这个函数中，我点击ListView中的TR点击：

突出显示该行。
选中复选框...已选中

我试图通过Console.log（）跟踪事件..但我发现：

如果我点击（复选框），此事件将被激活2次，一次用于（TR），另一次用于（复选框）
如果我点击它（自行），此事件将仅在（仅限）TR时被解雇

（'＃NewClientsTable'）=＆gt; ItemTemplate中的表

如果我们点击Checkbox ??

Answer 1

您需要在复选框事件处理程序中附加event.stopPropagation()以阻止冒泡。假设您有以下事件用于复选框点击事件：

// selector and context depend on your original code
$('#NewClientsTable').on('click', 'input[type="checkbox"]', (function(e){
  e.stopPropagation();
  // another rest of the code
});

Answer 2

要阻止事件在TR标记子项上触发，请执行以下操作：

$("#NewClientsTable tr input[type='checkbox']").click(function(event){
    event.stopPropagation();
});

以下是演示：

$("tr").click(function(event){
  alert("works");
  $(this).toggleClass("mycolor");
});
$("tr input[type='checkbox']").click(function(event){
    event.stopPropagation();
    $(this).closest('tr').toggleClass("mycolor");
});

.mycolor{ background-color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td><input type="checkbox" name="check" ></td><td>test2</td></tr>
  <tr><td><input type="checkbox" name="check2" ></td><td>test2</td></tr>
<table>

在本演示中，您将注意到，如果您单击复选框，则不会发生任何事情，但如果您单击该行，则会触发事件

用于选择行的Listview复选框被提升2倍

2 个答案: