[英]When I click a checkbox in a knockout table row, the tr click event overrides the checkbox state change
[英]How to stop overlapping click when run on change checkbox in table row?
我有第一列带复选框的表。
我可以通过勾选复选框 select 行并在任何地方单击行。
<form class=".form">
<table class="table">
<tbody>
<tr data-id="1" >
<td>
<input class="magic-checkbox" type="checkbox" name="ids[]" id="radio_1" value="1">
<label for="radio_1"></label>
</td>
<td>1</td>
</tr>
<tr data-id="2" >
<td>
<input class="magic-checkbox" type="checkbox" name="ids[]" id="radio_2" value="2">
<label for="radio_2"></label>
</td>
<td>2</td>
</tr>
</tbody>
</table>
</form>
复选框更改事件:
$(document).on("change", "input[name=\"ids[]\"]", function(event) {
event.stopPropagation();
// change the colour of row.
});
表格行点击事件:
$(document).on('click', '.form > table > tbody > tr', function() {
$(this).find("input[name=\"ids[]\"]").trigger("click");
});
当我单击行上的切换时,复选框被选中和未选中工作。 但是我点击复选框什么也没有发生,因为这两个事件都被触发了,就像首先被更改勾选然后被行点击自动取消选中。
我该如何解决这个问题?
将change
事件改为click
如下:
$(document).on("click", "input[name=\"ids[]\"]", function(event) { event.stopPropagation(); // change the colour of row. }); $(document).on('click', 'form > table > tbody > tr', function() { $(this).find("input[name=\"ids[]\"]").trigger("click"); console.log('clicked on row') });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class=".form"> <table class="table" border="1"> <tbody> <tr data-id="1" > <td> <input class="magic-checkbox" type="checkbox" name="ids[]" id="radio_1" value="1"> <label for="radio_1"></label> </td> <td>1</td> </tr> <tr data-id="2" > <td> <input class="magic-checkbox" type="checkbox" name="ids[]" id="radio_2" value="2"> <label for="radio_2"></label> </td> <td>2</td> </tr> </tbody> </table> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.