定义和用法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#list{
background-color: gold;
}
</style>
</head>
<body>
<!-- ul#list>li{$}*5 -->
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#list").delegate("li","click",function(){
$(this).css({"backgroundColor":"red"});
})
var $li = $('<li>6</li>');
$("#list").append($li);
})
</script>
</body>
</html>
//如果直接绑定事件,再动态添加子元素时,就不会绑定事件
$("#list").on("li","click", function() {
})
替换成
$("#list").delegate("li","click", function() {
})
再优化,以免重复绑定事件
$("#list").off().delegate("li","click", function() {
})