Định nghĩa và sử dụng
- .delegate(): Đính kèm một xử lý tới một hoặc nhiều sự kiện cho tất cả thành phần phù hợp với bộ chọn ngay lập tức hoặc sau đó dựa trên một tập hợp cụ thể các thành phần gốc.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.4.2
.delegate(bộ chọn,sự kiện,xử lý)
$('body').delegate('p','click',function(){
$(this).after("<p>Đoạn text thêm vào!</p>");
});
.delegate(bộ chọn,sự kiện,xử lý)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p { background: pink;}
</style>
<script>
$(function(){
$('body').delegate('p','click',function(){
$(this).after("<p>Đoạn text thêm vào!</p>");
});
});
</script>
</head>
<body>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy khi click thành phần p, body sẽ được thêm <p>Đoạn text thêm vào!</p>.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p>Thành phần p</p> |
<p>Thành phần p</p> |
Ví dụ thêm
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
li {
border: 1px solid red;
float: left;
height: 30px;
list-style: none;
padding-top: 5px;
text-align: center;
width: 80px;
}
.chosen { background: yellow; }
</style>
<script>
$(function(){
$('ul').delegate('li','click',function(){
$(this).toggleClass('chosen');
});
});
</script>
</head>
<body>
<ul>
<li>Chọn A</li>
<li>Chọn B</li>
<li>Chọn C</li>
<li>Chọn D</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Click vào từng thành phần li để xem kết quả, cách chọn này tương tự checkbox của input.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |