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

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

클릭 이벤트를 단추로 바인딩합니다.

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

한 시나리오에서, 이것은 여러 번 호출되기 때문에, 제가 할 때,trigger방지하려는 여러 Ajax 호출이 표시됩니다.

어떻게 하면 좋을까요?bind이전에 구속되지 않은 경우에만.

한 가지 더 - CSS 클래스와 필터로 이러한 버튼을 표시합니다.

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

최신 jQuery 버전에서 대체bind와 함께on:

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

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

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

저는 그것을 하는 "원스"라는 아주 작은 플러그인을 썼습니다.요소에서 off 및 on을 실행합니다.

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

간단히 말해,

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

가장 좋은 방법은 라이브() 또는 위임()을 사용하여 각 자식 요소가 아닌 부모 요소에서 이벤트를 캡처하는 것입니다.

단추가 #상위 요소 안에 있으면 다음을 바꿀 수 있습니다.

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

타고

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

이 코드가 실행될 때 #myButton이 아직 존재하지 않더라도.

사용하지 않는 이유

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)

확인/바인딩/바인딩 해제를 피하기 위해 접근 방식을 변경할 수 있습니다!Jquery.on()을 사용하는 것이 어떻습니까?

Jquery 1.7, .live(), .delegate()는 더 이상 사용되지 않으므로 이제 .on()을 사용하여

현재 및 미래의 선택기와 일치하는 모든 요소에 대해 이벤트 핸들러 연결

즉, 이벤트를 아직 존재하는 부모 요소에 부착하고 자식 요소가 있는지 여부에 관계없이 자식 요소를 부착할 수 있습니다!

다음과 같이 .on()을 사용하는 경우:

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

부모에서 이벤트 클릭을 발견하고 자녀 '#myButton'을 검색합니다(존재하는 경우...

따라서 하위 요소를 제거하거나 추가할 때 이벤트 바인딩을 추가할지 제거할지 걱정할 필요가 없습니다.

@konrad-garus 답변을 기반으로 하지만, 제가 믿기 때문에, 사용합니다.class스타일링에 주로 사용되어야 합니다.

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

시도:

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

언급URL : https://stackoverflow.com/questions/6361465/how-to-check-if-click-event-is-already-bound-jquery