Cách liên kết, hủy liên kết và khôi phục (nhấp) các sự kiện trong JQuery

Question

Sau khi hỏi cùng một câu hỏi 2 tuần trước here, cuối cùng tôi đã tìm thấy giải pháp "". Đây là lý do tại sao tôi trả lời câu hỏi của riêng tôi. ;)

LÀM THẾ NÀO ĐỂ BIND, UNBIND VÀ REBIND SỰ KIỆN TRONG JQUERY?

Answer 1

Và đây là giải pháp hoàn hảo. (Ít nhất là đối với tôi.)

$(document).on('click', 'a#button', function(){ 
    $(this).after('<span> hello</span>'); 
    $('span').fadeOut(1000); 
}); 

$('a#toggle').toggle(
    function(){ 
     $(this).text('rebind'); 
     $('a#button').on('click.disabled', false); 
    }, 
    function(){ 
     $(this).text('unbind'); 
     $('a#button').off('click.disabled'); 
    } 
); 

".on()". LƯU Ý: Điều quan trọng là ràng buộc sự kiện như bạn có thể thấy trên dòng một! Nó không hoạt động với .click() hoặc…!

Xem docs!

Here is a fiddle để dùng thử và thử nghiệm với nó!

Tận hưởng!

Answer 2

Chức năng này mở rộng jQuery để bao gồm một toán tử gắn các trình xử lý sự kiện giống như .on. Ngoài ra nó ngăn cản nhiều hơn một trường hợp duy nhất của một trình xử lý đã cho được gắn vào (các) bộ chọn.

Lưu ý rằng việc xóa và kết nối lại trình xử lý sự kiện sẽ thay đổi thứ tự mà chúng được đính kèm.

(function ($) { 
    $.fn.reBind = function(events, handler) { 
     return this.off(events, handler).on(events, handler); 
    }; 
}(jQuery)); 

Answer 3

Một giải pháp đơn giản và ngắn gọn là thêm lớp vào đối tượng nếu bạn muốn hủy liên kết, sau đó xóa lớp này để hoàn nguyên cũ;

$('#button').click(function(){ 
    if($(this).hasClass('unbinded')) return; 
    //Do somthing 
}); 

$('#toggle').click(function(){ 
    $('#button').toggleClass('unbinded'); 
});