jQuery 事件 - delegate() 方法

定义和用法

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() {
						
})
发布了107 篇原创文章 · 获赞 23 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/qq_42092177/article/details/103961453