jQuery delegate() 方法。
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
语法
$(selector).delegate(childSelector,event,data,function)
childSelector 必需。规定要添加事件处理程序的一个或多个子元素。
event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
</script>
</body>
</html>
官方样例:
图中示例:金属材料—>金属结构—>其它结构—>铝合金结构 是一个4层的结构。
因为和“金属材料”一样的根结构还有很多,如果一次性将他们的子孙结构都一并加载到页面中将会耗时很多,此时,利用单击事件然后通过ajax加载个子的子类别。