jQuery中delegate()方法的用法详解
在jQuery中，`delegate()`方法用于为动态添加或移除的元素绑定事件处理程序。它允许您为父级元素指定一个选择器，
然后当匹配该选择器的子元素触发事件时，履行相应的处理函数。
`delegate()`方法的语法以下：
```javascript
$(parentSelector).delegate(childSelector, event, handler);
```
- `parentSelector`：指定要绑定事件的父级元素的选择器。
- `childSelector`：指定要触发事件的子元素的选择器。
- `event`：指定要绑定的事件类型，例如`click`、`mouseover`等。
- `handler`：事件触发时要履行的处理函数。
以下是`delegate()`方法的使用示例：
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery⑶.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()`方法来实现相同的功能。
1对1专业客服
24小时服务支持
365天无间断服务
5分钟快速响应
TOP