.off()

Đị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

.off()

$('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="http://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="http://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.

THÔNG BÁO LỖI