Định nghĩa và sử dụng
- .off(): Thường được sử dụng để loại bỏ việc xử lý một sự kiện của thành phần khi sử dụng phướng thức .on()
Cấu trúc
- Đã được thêm vào từ phiên bản 1.7
$('p').off();
.off('sự kiện','bộ chọn','Xử lý sự kiện')
$('p').off('click','.test',function(){...});
.off()
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(){
$("p").on("click",function(){
$(this).css("background-color","yellow");
});
$("button").click(function(){
$("p").off();
});
});
</script>
</head>
<body>
<p>Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
<button>Click</button>
</body>
</html>
Hiển thị trình duyệt:
Click vào từng thành phần p sẽ thấy hiệu ứng thay đổi background, tuy nhiên nếu ta click vào button trước thì việc thực hiện sự kiện của thành phần p sẽ không còn.
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>
<script>
$(function(){
$("p").on("click",function(){
$(this).css("background-color","yellow");
});
$("button").click(function(){
$("p").off('click');
});
});
</script>
</head>
<body>
<p>Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
<button>Click</button>
</body>
</html>
Hiển thị trình duyệt:
.off('click') đã loại bỏ sự kiện click của thành phần p.
.off('sự kiện','bộ chọn','Xử lý sự kiện')
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var x=0;
$("p").click(function(event){
$(this).animate({fontSize:"+=3px"});
x++;
if (x>=3){
$(this).off(event);
}
});
});
</script>
</head>
<body>
<p>Click để zoom text, có thể click để zoom được 3 lần</p>
</body>
</html>
Hiển thị trình duyệt:
Sự kiện click để zoom text được loại bỏ khi x>=3.