我们在绑定事件时（比如点击事件），只能绑定在HTML页面已有的元素上（比如下方html里的
上），当使用jQuery创建新的div元素时，新的元素便没有这个事件，如果我想还有，那怎么办，这里就得用到事件委托。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件委托</title>
<script src="jquery.js"></script>
<style>
div{
width:100px;
height:100px;
border:1px solid #fff;
background:red;
margin:5px;
float:left;
}
</style>
</head>
<body>
<form action="">
<input type="button" value="点击增加div" id="btn">
</form>
//原有的div元素
<div id="div1"></div>
<script>
//点击创建新的div元素
$('#btn') .click(function(){
$('<div></div>').appendTo($('body'));
})
//为元素附上点击事件，当点击元素时，背景颜色改变,对新添加元素无效
$('div').click(function(){
$(this).css('background','green');
})
// 事件委托
$(document).on('click','div',function(){
$(this).css('background','green');
})
</script>
</body>
</html>
网友评论