Cara memeriksa apakah acara klik sudah terikat - JQuery

Saya mengikat acara klik dengan tombol:

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

Dalam satu skenario, ini dipanggil beberapa kali, jadi ketika saya melakukan itu triggersaya melihat beberapa panggilan ajax yang ingin saya cegah.

Bagaimana saya bindhanya jika tidak terikat sebelumnya.

Pembaruan 24 Agustus '12 : Di jQuery 1.8, tidak mungkin lagi untuk mengakses acara elemen menggunakan.data('events') . (Lihat bug ini untuk detailnya.) Dimungkinkan untuk mengakses data yang sama dengan jQuery._data(elem, 'events'), struktur data internal, yang tidak berdokumen dan karenanya tidak 100% dijamin akan tetap stabil. Namun ini seharusnya tidak menjadi masalah, dan baris yang relevan dari kode plugin di atas dapat diubah sebagai berikut:

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

Peristiwa jQuery disimpan dalam objek data yang disebut events, sehingga Anda dapat mencari di ini:

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

Akan lebih baik, tentu saja, jika Anda dapat menyusun aplikasi sehingga kode ini hanya dipanggil sekali.

Ini bisa dienkapsulasi menjadi 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));
};

Anda kemudian dapat menelepon:

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

Satu lagi cara - tandai tombol tersebut dengan kelas CSS dan filter:

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

Dalam versi jQuery terbaru ganti binddengan on:

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

Jika menggunakan jQuery 1.7+:

Anda dapat menelepon offsebelumnya on:

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

Jika tidak:

Anda bisa melepas ikatannya terlebih dahulu:

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

Cara terbaik yang saya lihat adalah menggunakan live () atau delegate () untuk menangkap acara di orangtua dan tidak di setiap elemen anak.

Jika tombol Anda berada di dalam elemen #parent, Anda dapat mengganti:

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

oleh

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

bahkan jika #myButton belum ada saat kode ini dieksekusi.

Saya menulis sebuah plugin yang sangat kecil yang disebut "sekali" yang melakukan itu. Jalankan elemen aktif dan nonaktif.

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

Dan sederhana:

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

Kenapa tidak menggunakan ini

unbind() sebelum bind()

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

Ini versi saya:

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

Pemakaian:

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

Berdasarkan jawaban @ konrad-garus, tetapi menggunakan data, karena saya percaya classsebagian besar harus digunakan untuk styling.

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

Untuk menghindari memeriksa / mengikat / melepaskan ikatan, Anda dapat mengubah pendekatan Anda! Mengapa Anda tidak menggunakan Jquery .on ()?

Karena Jquery 1.7, .live (), .delegate () sudah tidak digunakan lagi, sekarang Anda dapat menggunakan .on () untuk

Lampirkan pengendali acara untuk semua elemen yang cocok dengan pemilih saat ini, sekarang dan di masa depan

Ini berarti bahwa Anda dapat melampirkan acara ke elemen induk yang masih ada dan melampirkan elemen anak-anak apakah mereka ada atau tidak!

Saat Anda menggunakan .on () seperti ini:

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

Anda menangkap peristiwa klik pada orangtua dan itu mencari anak '#myButton' jika ada ...

Jadi, ketika Anda menghapus atau menambahkan elemen turunan, Anda tidak perlu khawatir tentang apakah akan menambah atau menghapus acara yang mengikat.

Mencoba:

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

Pada Juni 2019, saya telah memperbarui fungsi (dan berfungsi untuk apa yang saya butuhkan)

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

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

JQuery memiliki solusi :

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

setara:

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