클릭 이벤트가 이미 바인딩되어 있는지 확인하는 방법-JQuery

클릭 이벤트를 버튼으로 바인딩하고 있습니다.

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

한 시나리오에서 이것은 여러 번 호출되기 때문에 내가 할 때 trigger여러 개의 ajax 호출을 방지하고 싶습니다.

bind이전에 묶이지 않은 경우에만 어떻게합니까?

업데이트 : 2012 년 8 월 24 일 : 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 년 6 월 현재 기능을 업데이트했습니다 (필요한 기능을 수행 중입니다)

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