Định nghĩa và sử dụng
- .on(): Đính kèm một hàm xử lý sự kiện cho một hoặc nhiều sự kiện tới một thành phần được chọn.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.7
.on('Sự kiện', function(){...})
$('p').on('click', function(){
alert($(this).text());
});
.on('Sự kiện', 'Bộ chọn', function(){...})
$('body').on('click', 'a', function(){
event.preventDefault();
});
.on('Sự kiện', function(){...})
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>
<script>
$(function(){
$('td').on('click',function(){
var txt = $(this).text();
$('span').text(txt);
});
});
</script>
</head>
<body>
<span>Nội dung td</span>
<table border="1">
<tr>
<td>TD 01</td>
<td>TD 02</td>
<td>TD 03</td>
</tr>
<tr>
<td>TD 11</td>
<td>TD 12</td>
<td>TD 13</td>
</tr>
<tr>
<td>TD 21</td>
<td>TD 22</td>
<td>TD 23</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Click vào từng td để thấy kết quả.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<span>Nội dung td</span> |
<span>TD 22</span> |
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>
p {
background-color: yellow;
}
.active {
color: blue;
font-weight: bold;
}
.over {
background-color: #ebc90c;
}
</style>
<script>
$(function(){
$('p').on({
click: function(){
$(this).toggleClass("active");
},
mouseenter: function(){
$(this).addClass("over");
},
mouseleave: function(){
$(this).removeClass("over");
}
});
});
</script>
</head>
<body>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Click và di chuyển chuột vào thành phần p để thấy kết quả.
.on('Sự kiện', 'Bộ chọn', function(){...})
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-color: yellow; }
</style>
<script>
$(function(){
var i = 0;
$('body').on('click', 'button', function(){
$(this).after("<p>Another paragraph! "+(++i)+"</p>");
});
});
</script>
</head>
<body>
<div>
<button>Click</button>
</div>
</body>
</html>
Hiển thị trình duyệt:
Click liên tục vào button sẽ thấy kết quả.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<button>Click</button> |
<button>Click</button> |