Ngăn chặn bind sự kiện nhiều lần trong jQuery

Bind sự kiện nhiều lần là một vấn đề thường xảy ra nhưng nhiều lập trình viên ít đề y đến. Việc này có thể thể hiện lên cho mình nhìn thấy khi chương trình chạy sai hoặc cũng có thể không hiển thị dấu hiệu gì cả. Đây cũng là một vấn đề làm cho tốc độ của chương trình giảm xuống. Vấn đề này xảy ra khi sự kiện được gọi trong $(document).on("page:change", function(){});. Khi sử dụng jquery page:change các sự kiện cũ đã bind không được xóa đi và sự kiện mới lại được thêm vào. Vì thế một đối tượng có thể bind sự kiện nhiều lần. Ví dụ:

$(document).on('page:change', function(){       
    $(document).on('click', '#example-button',function() {
        console.log('Button click');
    }); 
});

button example-button trên dược bind sự kiện click mỗi lần vào page:change. Số lần bind sự kiện click phụ thuộc vào số lần page:change đã được thực hiện. Trong bài viết này sẽ cho 2 cách để giải quyết vấn đề trên.

Cách 1 :

Trước khi bind sự kiện phải ubund các sự kiện đã có trước để đảm bảo các sự kiện có từ trước đã xóa hết và chỉ có mỗi một sự kiện mới được gán. Có thể sử dụng hàm off hoặc unbind.

Dùng off

$(document).on('page:change', function(){       
    $(document).off('click', '#example-button').on('click', '#example-button',function() {
        console.log('Button click');
    }); 
});

Dùng unbind

$(document).on('page:change', function(){       
    $(document).unbind('click', '#example-button').on('click', '#example-button',function() {
        console.log('Button click');
    }); 
});

Cách 2:

Trong mỗi sự kiện, khi bind sự kiện kiểm tra trước, Nếu sự kiện đã bind rồi sễ không cho thực hiện gì hết. Khong khuyến khích sử dụng phương pháp này vì cách này chỉ làm cho đoạn code không thực hiện sai, nhưng số lần sự kiện bind vẫn giữ lại.

$(document).on('page:change', function(){       
    $(document).unbind('click', '#example-button').on('click', '#example-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
           console.log('Button click');
            e.handled = true;
        }
    }); 
});