js 新追加的元素点击事件没触发
作者：互联网
常见情况：
监听html中某个类的元素的点击事件，当新追加同一个类的元素时，点击新追加的元素没有反应。
例如：
<html><head>
<title>Testtitle>
<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 = '';
$('.divs').on('click',function(){
console.log("点击第"+($(this).index()+1)+"个红框，新追加了一个新的元素")
$('.page').append(str);
})
script>body>html>
点击第一个红框，追加一个红框，但是点击第二个红框的时候并没有追加效果。
原因：
新追加的元素开始的时候是没有绑定之前的监听事件，所以点击无效。
尝试在追加元素之后，将该元素进行绑定同一个类的监听事件，实现无限克隆
<html><head>
<title>Testtitle>
<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 = '';
bind();
function bind(){
//off是解除jQ的点击事件然后再重新绑定点击事件，重复绑定会触发事件多次
$('.divs').off('click').on('click',function(){
console.log("点击第"+($(this).index()+1)+"个红框，新追加了一个新的元素")
$('.page').append(str);
bind();
})
}
script>body>html>
标签：触发,红框,元素,100px,js,点击,追加,divs 来源： https://blog.51cto.com/u_14175378/2759926