Cách kiểm tra xem sự kiện nhấp đã bị ràng buộc chưa - JQuery

Tôi đang ràng buộc một sự kiện nhấp chuột bằng một nút:

$('#myButton').bind('click',  onButtonClicked);

Trong một kịch bản, điều này được gọi nhiều lần, vì vậy khi tôi thực hiện, triggertôi thấy nhiều cuộc gọi ajax mà tôi muốn ngăn chặn.

Làm thế nào để tôi bindchỉ khi nó không bị ràng buộc trước.

Cập nhật ngày 24 tháng 8 năm 12 : Trong jQuery 1.8, không thể truy cập các sự kiện của phần tử bằng cách sử dụng .data('events'). (Xem lỗi này để biết chi tiết.) Có thể truy cập cùng một dữ liệu với jQuery._data(elem, 'events'), cấu trúc dữ liệu nội bộ, không có giấy tờ và do đó không được đảm bảo 100% để duy trì ổn định. Tuy nhiên, đây không phải là một vấn đề và dòng mã plugin có liên quan ở trên có thể được thay đổi thành như sau:

var data = jQuery._data(this[0], 'events')[type];

Các sự kiện jQuery được lưu trữ trong một đối tượng dữ liệu được gọi events, vì vậy bạn có thể tìm kiếm trong này:

var button = $('#myButton');
if (-1 !== $.inArray(onButtonClicked, button.data('events').click)) {
    button.click(onButtonClicked);
}

Tất nhiên, sẽ là tốt nhất nếu bạn có thể cấu trúc ứng dụng của mình để mã này chỉ được gọi một lần.

Điều này có thể được gói gọn trong một plugin:

$.fn.isBound = function(type, fn) {
    var data = this.data('events')[type];

    if (data === undefined || data.length === 0) {
        return false;
    }

    return (-1 !== $.inArray(fn, data));
};

Sau đó bạn có thể gọi:

var button = $('#myButton');
if (!button.isBound('click', onButtonClicked)) {
    button.click(onButtonClicked);
}

Một cách nữa - đánh dấu các nút như vậy bằng một lớp và bộ lọc CSS:

$('#myButton:not(.bound)').addClass('bound').bind('click',  onButtonClicked);

Trong các phiên bản jQuery gần đây thay thế bindbằng on:

$('#myButton:not(.bound)').addClass('bound').on('click',  onButtonClicked);

Nếu sử dụng jQuery 1.7+:

Bạn có thể gọi offtrước on:

$('#myButton').off('click', onButtonClicked) // remove handler
              .on('click', onButtonClicked); // add handler

Nếu không:

Bạn chỉ có thể hủy liên kết sự kiện đầu tiên:

$('#myButton').unbind('click', onButtonClicked) //remove handler
              .bind('click', onButtonClicked);  //add handler

Cách tốt nhất tôi thấy là sử dụng live () hoặc ủy nhiệm () để ghi lại sự kiện trong cha mẹ chứ không phải trong mỗi phần tử con.

Nếu nút của bạn nằm trong phần tử #parent, bạn có thể thay thế:

$('#myButton').bind('click', onButtonClicked);

bởi

$('#parent').delegate('#myButton', 'click', onButtonClicked);

ngay cả khi #myButton chưa tồn tại khi mã này được thực thi.

Tôi đã viết một plugin rất nhỏ gọi là "một lần" để làm điều đó. Thực hiện tắt và bật trong phần tử.

$.fn.once = function(a, b) {
    return this.each(function() {
        $(this).off(a).on(a,b);
    });
};

Và đơn giản là:

$(element).once('click', function(){
});

Tại sao không sử dụng cái này

unbind() trước bind()

$('#myButton').unbind().bind('click',  onButtonClicked);

Đây là phiên bản của tôi:

Utils.eventBoundToFunction = function (element, eventType, fCallback) {
    if (!element || !element.data('events') || !element.data('events')[eventType] || !fCallback) {
        return false;
    }

    for (runner in element.data('events')[eventType]) {
        if (element.data('events')[eventType][runner].handler == fCallback) {
            return true;
        }

    }

    return false;
};

Sử dụng:

Utils.eventBoundToFunction(okButton, 'click', handleOkButtonFunction)

Dựa trên câu trả lời @ konrad-garus, nhưng sử dụng data, vì tôi tin rằng classnên được sử dụng chủ yếu để tạo kiểu.

if (!el.data("bound")) {
  el.data("bound", true);
  el.on("event", function(e) { ... });
}

Để tránh kiểm tra / ràng buộc / hủy liên kết, bạn có thể thay đổi cách tiếp cận của mình! Tại sao bạn không sử dụng Jquery .on ()?

Vì Jquery 1.7, .live (), .delegate () không được dùng nữa, nên bây giờ bạn có thể sử dụng .on () để

Đính kèm một trình xử lý sự kiện cho tất cả các yếu tố phù hợp với bộ chọn hiện tại, hiện tại và trong tương lai

Điều đó có nghĩa là bạn có thể đính kèm một sự kiện vào một phần tử cha mẹ vẫn còn tồn tại và đính kèm các phần tử con cho dù chúng có mặt hay không!

Khi bạn sử dụng .on () như thế này:

$('#Parent').on('click', '#myButton'  onButtonClicked);

Bạn bắt sự kiện nhấp vào phụ huynh và nó tìm kiếm con '#myButton' nếu tồn tại ...

Vì vậy, khi bạn xóa hoặc thêm một phần tử con, bạn không phải lo lắng về việc nên thêm hoặc xóa ràng buộc sự kiện.

Thử:

if (typeof($("#myButton").click) != "function") 
{
   $("#myButton").click(onButtonClicked);
}

if ($("#btn").data('events') != undefined && $("#btn").data('events').click != undefined) {
    //do nothing as the click event is already there
} else {
    $("#btn").click(function (e) {
        alert('test');
    });
}

Kể từ tháng 6 năm 2019, tôi đã cập nhật chức năng (và nó hoạt động cho những gì tôi cần)

$.fn.isBound = function (type) {
    var data = $._data($(this)[0], 'events');

    if (data[type] === undefined || data.length === 0) {
        return false;
    }
    return true;
};

JQuery có giải pháp :

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
}); 

tương đương:

$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});