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

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的任何点击：

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

在控制台中，我尝试通过Console.log（）跟踪事件。但是我发现：

• 如果我单击（复选框）， 此事件将被触发两次，一次（TR），另一次（复选框）
• 如果我自己点击（行），则该事件仅会（TR）被触发1次

（'#NewClientsTable'）=> ItemTemplate中的表

只有单击复选框，我们才能一次触发该事件？

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> 

在此演示中，您会注意到，如果单击复选框，则什么都不会发生，但是，如果单击行，则会触发该事件