如下
问题
刚开始two是隐藏的，点击one对应的two会显示，第一次点击two的时候，只会跳出一个alert(),重复点击就会递增的alrt(), 2次，3次......
图片
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
height: 100px;
border-bottom: 1px solid #000;
}
.two {
display: none;
width: 50px;
height: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<div class="one">
one
<div class="two">two</div>
</div>
</div>
<div class="box-item">
<div class="one">
one
<div class="two">two</div>
</div>
</div>
<div class="box-item">
<div class="one">
one
<div class="two">two</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.box .box-item .one').click(function() {
$(this).find(".two").show()
$(this).find(".two").click(function() {
alert($(this).html());
})
})
</script>
</body>
</html>
4 回答
侃侃尔雅
TA贡献1801条经验 获得超16个赞
- 这不是冒泡，这是重复绑定。
- DOM里的事件是这样的，你可以想象每个DOM结构有一张散列表，这张表一开始是空的，每次注册一个事件回调呢，就会把这个回调记到这个表上；而事件发生的时候呢，就会找到这个表，然后一个回调一个回调的去执行。
- 有个常见的误区，是以为每个DOM只有一个回调，事件发生时被触发执行，这是不对的。事实上，注册了一个回调就会执行一个，而注册了好几个，就会挨个执行。
- 题目中的错误也挺常见，是一个事件回调里边注册另一个事件回调，这样当外边的回调执行时，就会给里边的DOM上挂一个回调，执行多次以后，里边的回调也相应增多，这样在触发里边DOM的时候，就会有多个回调被执行，从而导致错误。
- 原生写法的注册事件其实可以拒掉具名函数事件回调的重复注册，但在jQ里，都是匿名函数/函数表达式，原生也防不住，从而变成了常见错误。
动漫人物
TA贡献1815条经验 获得超10个赞
$(this).find(".two").click(function(e) {
e.stopPropagation();
alert($(this).html());
})
开心每一天1111
TA贡献1836条经验 获得超13个赞
$('.box .box-item .one').click(function() {
$(this).find(".two").show()
$(this).find(".two").off();
$(this).find(".two").click(function() {
alert($(this).html());
})
})- 4 回答
- 0 关注
- 446 浏览
添加回答
举报
0/150
提交
取消