问题描述:想要给id="abc"的div追加一个新的div,并且让新div具有“单击事件”的监听
原始状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-1.11.0.js"></script>
<body>
<div id="abc" style="width: 100px; height: 100px; background: red;"></div>
<button id="button">提交信息</button>
</body>
<script>
$("#button").click(function() {
$("#abc").append("<div id='123' class='123' style='width: 50px; height: 50px; background: blue;'</div>");
});
$('.123').on("click",function(){
alert('OK');
});
</script>
</html>
这种放方式只能给当时已经存在的class="123"的元素增加监听事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-1.11.0.js"></script>
<body>
<div id="abc" style="width: 100px; height: 100px; background: red;"></div>
<button id="button">提交信息</button>
</body>
<script>
$("#button").click(function() {
$("#abc").append("<div id='123' class='123' style='width: 50px; height: 50px; background: blue;'</div>");
});
$(document).on('click', '.123', function() {
alert("OK");
})
</script>
</html>
这种可以给以后的也添加监听事件
划重点:
$(document).on('click', '.123', function() {
alert("OK");
})