클릭 이벤트가 이미 바인딩되었는지 확인하는 방법 - 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
'programing' 카테고리의 다른 글
선형 레이아웃, 상대 레이아웃 및 절대 레이아웃의 차이점은 무엇입니까? (0) | 2023.08.05 |
---|---|
PHP: 기본 cURL 시간 초과 값 (0) | 2023.08.05 |
Android:서비스에서 현재 전경 활동을 얻으려면 어떻게 해야 합니까? (0) | 2023.08.05 |
바이온 도커 컨테이너를 실행하는 방법은 무엇입니까? (0) | 2023.07.31 |
PostgreSQL 오류: 복구와의 충돌로 인해 문을 취소합니다. (0) | 2023.07.31 |