gpt4 book ai didi

javascript - row 事件在附加到 row 内元素的事件之前触发

转载 作者:行者123 更新时间:2023-12-01 01:17:04 29 4
gpt4 key购买 nike

我在行单击上附加了一个事件,在行内的复选框更改上附加了一个事件。

如何防止首先触发行单击?

$(document).on('click', 'table tr', function() {
console.log('row');
})

$(document).on('change', 'table tr input[type="checkbox"]', function() {
console.log('chk');
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox">
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>

最佳答案

将您在内部元素上处理的事件从 change 更改为 click

change 事件在 click 事件之后才会触发。单击事件在复选框上触发,然后冒泡到该行。完成后,将在复选框上触发更改事件。

$(document).on('click', 'table tr', function() {
console.log('row');
})

$(document).on('click', 'table tr input[type="checkbox"]', function() {
console.log('chk');
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox">
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>

关于javascript - row 事件在附加到 row 内元素的事件之前触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54655949/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com