Як перевірити, чи подія натискання вже пов'язана - JQuery

Я пов'язую подію натискання кнопкою:

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

За одним сценарієм, це викликається кілька разів, тому коли я роблю, triggerя бачу декілька викликів ajax, які я хочу запобігти.

Як мені робити, bindякщо його раніше не зв'язали.

Оновлення 24 серпня '12 : У 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 () для захоплення події в батьківському, а не в кожному дочірньому елементі.

Якщо ваша кнопка знаходиться в # прозорому елементі, ви можете замінити:

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

від

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

навіть якщо #myButton ще не існує, коли цей код виконується.

Я написав дуже крихітний плагін під назвою "раз", який це зробив. Виконати і ввімкнути елемент.

$.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 );
});