在jQuery中,delegate()方法用于為動態添加或移除的元素綁定事件處理程序。它允許您為父級元素指定一個選擇器,然后當匹配該選擇器的子元素觸發事件時,執行相應的處理函數。
delegate()方法的語法如下:
$(parentSelector).delegate(childSelector, event, handler);
- parentSelector:指定要綁定事件的父級元素的選擇器。
- childSelector:指定要觸發事件的子元素的選擇器。
- event:指定要綁定的事件類型,例如click、mouseover等。
- handler:事件觸發時要執行的處理函數。
以下是delegate()方法的使用示例:
<!DOCTYPE html><html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 綁定事件處理程序
$(".parent").delegate(".child", "click", function() {
alert("點擊了子元素");
});
// 動態添加元素并觸發事件
$(".add-btn").click(function() {
$(".parent").append("<div class='child'>子元素</div>");
});
// 動態移除元素
$(".remove-btn").click(function() {
$(".child").remove();
});
});
</script>
</head>
<body>
<button class="add-btn">添加子元素</button>
<button class="remove-btn">移除子元素</button>
<div class="parent">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
</div>
</body>
</html>
在上面的示例中,當點擊父級元素(class為child的子元素)時,會彈出一個提示框。通過delegate()方法將事件處理程序綁定到父級元素(class為parent),并指定要觸發事件的子元素選擇器(class為child)。點擊"添加子元素"按鈕可以動態添加子元素,點擊"移除子元素"按鈕可以動態移除子元素,新添加的子元素也會綁定相同的事件處理程序。
請注意,自jQuery版本3.0起,delegate()方法已經被廢棄,推薦使用更現代的on()方法來實現相同的功能。