jQuery 事件委托

69 阅读 0 评论 46 点赞

我是靠谱客的博主体贴皮卡丘，最近开发中收集的这篇文章主要介绍jQuery 事件委托，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

自从学习了jQuery，发现很多事件没办法记住，往往学着后面的忘着前面的，很苦恼，所以捡出一些容易忘记的方法单独记录在这里，以供日后复习用到。

我们在绑定事件时（比如点击事件），只能绑定在HTML页面已有的元素上（比如下方html里的

上），当使用jQuery创建新的div元素时，新的元素便没有这个事件，如果我想还有，那怎么办，这里就得用到事件委托。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件委托</title>
<script src="../../../File/jquery-3.3.1.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');
})
</script>
</body>
</html>

可以看到，第一个div点击可以变颜色，但是后面的创建出来的点击没有改变颜色

当我们将代码更改成下面，无论我们创建多少个新div元素，点击背景色改变都有效

<script>
$('#btn').click(function(){
$('<div></div>').appendTo($('body'));
})
$(document).on('click','div',function(){
$(this).css('background','green');
})
</script>