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

Program / 글쓴이

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

$('#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)