求助-怎么阻止新生成的a元素事件冒泡
本帖最后由 Dexlux 于 2021-7-15 21:37 编辑<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<table class="table">
<tr class="tr">
<td><a href="JavaScript:">a元素</a></td>
</tr>
<tr>
<td><a href="javascript:" class="add">增加</a></td>
</tr>
</table>
<script type="text/javascript">
$("tr").on("click", function () {
alert('tr被点击了');
})
$('.add').click(function () {
let td = $('<td><a href="JavaScript:">新添加的a</a></td>')
$('.tr').append(td)
})
$('td').on('click', 'a', function (e) {
e.stopPropagation();
})
</script>
</body>
</html> 两个问题，首先jquery新增的td。未触发 29行的点击事件
比如你改成下面这个：
$('td').on('click', 'a', function (e) {
alert(1)
e.stopPropagation();
})
发现 点击jquery动态新增的td 根本没触发上面这个click事件
你得注意了
想让动态添加的dom元素 也触发事件 你得改成document 如下这种
$(Document).on('click', 'tr td a', function (e) {
e.stopPropagation();
});
但是 这种优先级没有：$("tr").on("click", function () {
alert('tr被点击了');
})
这个高，所以这个也得改成docment:
$(Document).on('click', 'tr', function (e) {
alert('tr被点击了');
});
js代码全部如下：
$(Document).on('click', 'tr', function (e) {
alert('tr被点击了');
});
$('.add').click(function () {
let td = $('<td><a href="JavaScript:">新添加的a</a></td>')
$('.tr').append(td)
})
$(Document).on('click', 'tr td a', function (e) {
e.stopPropagation();
}); 本帖最后由 莫里亚蒂 于 2021-7-8 17:24 编辑
加onclikc事件return flase
$('.add').click(function () {
let td = $('<td><a style="pointer-events:none">新添加的a</a></td>')
$('.tr').append(td)
})
$('.add').click(function () {
let td = $('<td><a onclick="return false">新添加的a</a></td>')
$('.tr').append(td)
})
$('.add').click(function () {
let td = $('<td><a href="javascript:;">新添加的a</a></td>')
$('.tr').append(td)
}) ITMN 发表于 2021-7-8 17:32
两个问题，首先jquery新增的td。未触发 29行的点击事件
比如你改成下面这个：
$('td').on('click', 'a',...
jquery里有个隐藏的坑，
动态新增的元素，一般事件并不会触发，事件需要这样写。$(document).on....
或者还有一种办法 重写click
$('.tr').append(td).on('click', 'a', function(){
e.stopPropagation();
})
莫里亚蒂 发表于 2021-7-8 17:13
加onclikc事件return flase
$('.add').click(function () {
这种并不会阻止事件冒泡
你可以测下，tr事件还会发生 ITMN 发表于 2021-7-8 17:32
两个问题，首先jquery新增的td。未触发 29行的点击事件
比如你改成下面这个：
$('td').on('click', 'a',...
https://imgtu.com/i/RO6jat
大佬运行是运行出来了 但控制台报这个错是什么意思呀
jquery.min.js:2 Uncaught TypeError: Failed to construct 'Document': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at e (jquery.min.js:2)
at t (jquery.min.js:2) https://z3.ax1x.com/2021/07/08/RO6jat.png 本帖最后由 ITMN 于 2021-7-8 18:04 编辑
Dexlux 发表于 2021-7-8 17:56
document没有引号不是字符串，你贴下代码 ITMN 发表于 2021-7-8 18:03
document没有引号不是字符串，你贴下代码
是按您的一样的啊 Document没加引号 ITMN 发表于 2021-7-8 17:39
这种并不会阻止事件冒泡
你可以测下，tr事件还会发生
这跟jq的事件机制有关 append dom之后手动绑定下事件就可以了
$('.add').click(function () {
let td = $('<td><a class="aa">新添加的a</a></td>')
$('.tr').append(td)
$('.aa').click(function(e){
e.stopPropagation()
})
})
页:
[1]
2