常见情况:
监听html中某个类的元素的点击事件,当新追加同一个类的元素时,点击新追加的元素没有反应。
例如:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.divs{
height: 100px;
width: 100px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="page">
<div class="divs"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var str = '<div class="divs"></div>';
$('.divs').on('click',function(){
console.log("点击第"+($(this).index()+1)+"个红框,新追加了一个新的元素")
$('.page').append(str);
})
</script>
</body>
</html>
点击第一个红框,追加一个红框,但是点击第二个红框的时候并没有追加效果。
原因:
新追加的元素开始的时候是没有绑定之前的监听事件,所以点击无效。
尝试在追加元素之后,将该元素进行绑定同一个类的监听事件,实现无限克隆
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.divs{
height: 100px;
width: 100px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="page">
<div class="divs"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var str = '<div class="divs"></div>';
bind();
function bind(){
//off是解除jQ的点击事件然后再重新绑定点击事件,重复绑定会触发事件多次
$('.divs').off('click').on('click',function(){
console.log("点击第"+($(this).index()+1)+"个红框,新追加了一个新的元素")
$('.page').append(str);
bind();
})
}
</script>
</body>
</html>