Как проверить, привязано ли событие клика - JQuery

Я привязываю событие щелчка к кнопке:

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

В одном сценарии это вызывается несколько раз, поэтому, когда я делаю это, triggerя вижу несколько вызовов ajax, которые я хочу предотвратить.

Как мне это сделать, bindтолько если он не был связан раньше.

Обновление 24 августа 2012 г . : в jQuery 1.8 больше невозможно получить доступ к событиям элемента с помощью .data('events'). (Подробнее см. В этой ошибке .) Можно получить доступ к тем же данным с jQuery._data(elem, 'events')помощью внутренней структуры данных, которая недокументирована и, следовательно, не на 100% гарантирует стабильность. Однако это не должно быть проблемой, и соответствующую строку кода плагина выше можно изменить на следующее:

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

События jQuery хранятся в названном объекте данных events, поэтому вы можете искать в нем:

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

Конечно, было бы лучше, если бы вы могли структурировать свое приложение так, чтобы этот код вызывался только один раз.

Это может быть инкапсулировано в плагин:

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

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

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

Затем вы можете позвонить:

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

Еще один способ - пометить такие кнопки классом CSS и фильтром:

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

В последних версиях jQuery замените bindна on:

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

При использовании jQuery 1.7+:

Вы можете позвонить offраньше on:

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

Если не:

Вы можете просто отвязать его первое событие:

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

На мой взгляд, лучший способ - использовать live () или delegate () для захвата события в родительском элементе, а не в каждом дочернем элементе.

Если ваша кнопка находится внутри элемента #parent, вы можете заменить:

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

по

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

даже если #myButton еще не существует, когда этот код выполняется.

Я написал очень маленький плагин под названием «once», который делает это. Выполнять от случая к случаю в элементе.

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

А просто:

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

Почему бы не использовать это

unbind() перед bind()

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

Вот моя версия:

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;
};

Использование:

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

На основе ответа @ konrad-garus, но с использованием data, поскольку я считаю, что его classследует использовать в основном для стилизации.

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

Чтобы избежать проверки / привязки / отмены привязки, вы можете изменить свой подход! Почему бы вам не использовать JQuery .on ()?

Поскольку Jquery 1.7, .live (), .delegate () устарели, теперь вы можете использовать .on () для

Прикрепите обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем

Это означает, что вы можете прикрепить событие к родительскому элементу, который все еще существует, и присоединить дочерние элементы независимо от того, присутствуют они или нет!

Когда вы используете .on () вот так:

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

Вы ловите событие, щелкнув по родительскому элементу, и ищите дочерний элемент '#myButton', если он существует ...

Поэтому, когда вы удаляете или добавляете дочерний элемент, вам не нужно беспокоиться о том, добавлять или удалять привязку события.

Пытаться:

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');
    });
}

По состоянию на июнь 2019 года я обновил функцию (и она работает для того, что мне нужно)

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

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

У JQuery есть решение :

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

эквивалент:

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