วิธีตรวจสอบว่าเหตุการณ์การคลิกถูกผูกไว้แล้วหรือไม่ - JQuery

ฉันผูกเหตุการณ์การคลิกด้วยปุ่ม:

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

ในสถานการณ์หนึ่งสิ่งนี้ถูกเรียกหลายครั้งดังนั้นเมื่อฉันทำtriggerฉันเห็นการโทรของ ajax หลายครั้งซึ่งฉันต้องการป้องกัน

ฉันจะทำอย่างไรbindถ้ามันไม่เคยผูกพันมาก่อน

อัปเดต 24 ส.ค. 55 : ใน 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 จะยังไม่มีเมื่อเรียกใช้รหัสนี้

ฉันเขียนปลั๊กอินเล็ก ๆ ที่เรียกว่า "ครั้งเดียว" ซึ่งทำเช่นนั้น ดำเนินการปิดและเปิดในองค์ประกอบ

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