jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까?

jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까?

나는 있습니다.input type="image"이것은 Microsoft Excel의 셀 노트와 같은 역할을 합니다.이를 입력한다면, 이 숫자는 다음과 같습니다.input-image와 짝이 되어, 나는 이벤트 핸들러를 설정했습니다.input-image그런 다음 사용자가 다음을 클릭합니다.image데이터에 메모를 추가할 수 있는 작은 팝업이 나타납니다.

내 문제는 사용자가 텍스트 상자에 0을 입력할 때 사용자가 사용하지 않도록 설정해야 한다는 것입니다.input-image의 이벤트 처리기.다음을 시도해 보았지만, 소용이 없었습니다.

$('#myimage').click(function { return false; });

jQuery ≥ 1.7

1인 jQuery 1.7의 API가되었습니다..bind()/.unbind()이전 버전과의 호환성을 유지할 수 있지만 기본 방법은 on/off(켜기/끄기) 기능을 사용하는 것입니다.다음은 다음과 같습니다.

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

---

jQuery < 1.7

예제 코드에서는 이전 이벤트를 재정의하지 않고 다른 클릭 이벤트를 이미지에 추가하기만 하면 됩니다.

$('#myimage').click(function() { return false; }); // Adds another click event

그러면 두 번의 클릭 이벤트가 모두 실행됩니다.

사람들이 말했듯이 바인딩 해제를 사용하여 모든 클릭 이벤트를 제거할 수 있습니다.

$('#myimage').unbind('click');

단일 이벤트를 추가한 후 추가되었을 수 있는 다른 이벤트를 제거하지 않고 제거하려는 경우 이벤트 네임스페이스를 사용할 수 있습니다.

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

이벤트만 제거하려면 다음과 같이 하십시오.

$('#myimage').unbind('click.mynamespace');

이 질문에 응답할 때는 이 옵션을 사용할 수 없었지만, 메소드를 사용하여 이벤트를 활성화/비활성화할 수도 있습니다.

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

이 코드는 다음을 클릭할 때 발생합니다.#mydisablebutton할 수 없는 를 성활화추에니다합가에 합니다.#myimage이렇게 가 더 이상 '. 즉, '장애인' 클래스가 됩니다..live()선택기가 다시 유효합니다.

이는 해당 클래스를 기반으로 한 스타일링을 추가함으로써 다른 이점도 있습니다.

바인딩 해제 기능을 사용하여 이 작업을 수행할 수 있습니다.

$('#myimage').unbind('click');

jquery의 동일한 개체 및 이벤트에 여러 이벤트 핸들러를 추가할 수 있습니다.즉, 새 항목을 추가해도 이전 항목이 바뀌지 않습니다.

이벤트 핸들러를 변경하기 위한 몇 가지 전략(예: 이벤트 이름 공간)이 있습니다.온라인 문서에 이에 대한 페이지가 몇 개 있습니다.

이 질문을 보세요(그렇게 해서 구속 해제를 배웠습니다).답변에는 이러한 전략에 대한 유용한 설명이 있습니다.

jquery에서 바인딩된 호버 콜백 함수를 읽는 방법

이벤트에 한 번만 응답하려면 다음 구문이 매우 유용합니다.

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

arguments.callee를 사용하면 특정 익명 함수 처리기 하나가 제거되므로 지정된 이벤트에 대해 단일 시간 처리기를 가질 수 있습니다.이것이 다른 사람들에게 도움이 되기를 바랍니다.

아마도 언바운드 방법이 당신에게 효과가 있을 것입니다.

$("#myimage").unbind("click");

저는 프롭과 속성을 사용하여 이벤트를 null로 설정해야 했습니다.저는 이것저것 할 수 없었어요.저는 또한 .unbind 작업을 할 수 없었습니다.저는 TD 요소를 연구하고 있습니다.

.prop("onclick", null).attr("onclick", null)

이벤트가 이런 방식으로 연결되고 대상을 분리해야 하는 경우:

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​

사용하는 경우$(document).on()동적으로 생성된 요소에 수신기를 추가하려면 다음을 사용하여 수신기를 제거해야 합니다.

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");

▁be다를 추가하는 것일 수.onclick인라인 마크업으로 처리기:

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

그다면, jquery 는.off()또는.unbind()작동하지 않습니다..jquery는 핸들러입니다.

$("#addreport").on("click", "", function (e) {
   openAdd();
});

그런 다음 jquery는 이벤트 핸들러에 대한 참조를 가지며 이벤트 핸들러를 제거할 수 있습니다.

$("#addreport").off("click")

Void King은 위의 댓글에서 이것을 조금 더 비스듬히 언급합니다.

.remove . event-handlers이것이 저에게 효과가 있었던 것입니다.

모든 이벤트 핸들러를 제거한다는 것은 플레인을 갖는 것을 의미합니다.HTML structure 일도 없이event handlers에 element그리고 그것들child nodes위해, 이를위해,,jQuery's clone()도움이 되었습니다.

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);

이걸로 우리는.clone신에를 originalevent-handlers그 위에

행운을 빕니다...

2014년에 업데이트됨

jQuery를 최신버 ▁doing를 수행하는 할 수 .$( "#foo" ).off( ".myNamespace" );

은 " " " " 입니다.$(element).prop('onclick', null);

정보 감사합니다.다른 사용자가 편집 모드에 있을 때 페이지 상호 작용을 잠그는 데 사용했습니다.아약스 컴플리트와 함께 사용했습니다.반드시 같은 행동이 아니라 다소 유사합니다.

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}

에 경우..on()메소드는 다음 예와 같이 이전에 특정 선택기와 함께 사용되었습니다.

$('body').on('click', '.dynamicTarget', function () {
    // Code goes here
});

둘다요.unbind()그리고..off()방법이 작동하지 않습니다.

그러나 .undlegate() 메서드를 사용하여 현재 선택기와 일치하는 모든 요소에 대해 이벤트에서 핸들러를 완전히 제거할 수 있습니다.

$("body").undelegate(".dynamicTarget", "click")

늦게 들어오는 건 알지만 이벤트를 제거하기 위해 일반 JS를 사용하는 게 어때요?

var myElement = document.getElementById("your_ID");
myElement.onclick = null;

또는 명명된 함수를 이벤트 핸들러로 사용하는 경우:

function eh(event){...}
var myElement = document.getElementById("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it

이것도 잘 작동합니다.간단하고 쉽습니다.http://jsfiddle.net/uZc8w/570/ 을 참조하십시오.

$('#myimage').removeAttr("click");

을 설정하면onclick경유로html할 필요가 있습니다.removeAttr ($(this).removeAttr('onclick'))

jquery를 통해 설정한 경우(위의 예에서 첫 번째 클릭 후와 같이), 다음과 같이 설정해야 합니다.unbind($(this).unbind('click'))

클릭 이벤트를 추가하는 중이었기 때문에 설명된 모든 접근 방식이 작동하지 않았습니다.on()런타임에 요소가 작성된 문서:

$(document).on("click", ".button", function() {
    doSomething();
});

해결 방법:

".button" 클래스의 바인딩을 해제할 수 없었기 때문에 같은 CSS 스타일을 가진 버튼에 다른 클래스를 할당했습니다.이렇게 함으로써 라이브/온 이벤트 핸들러는 클릭을 무시했습니다.

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

도움이 되길 바랍니다.

제 아래 코드가 모든 것을 설명하기를 바랍니다.HTML:

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>

저는 오늘 직장에서 이와 관련된 흥미로운 사례가 나왔는데, $(윈도우)에 스크롤 이벤트 핸들러가 있었습니다.

// TO ELIMINATE THE RE-SELECTION AND 
//   RE-CREATION OF THE SAME OBJECT REDUNDANTLY IN THE FOLLOWING SNIPPETS
let $window = $(window);

$window.on('scroll', function() { .... });

하지만, 그 이벤트 핸들러를 취소하기 위해, 우리는 그냥 사용할 수 없습니다.

$window.off('scroll');

왜냐하면 이 매우 일반적인 대상에 다른 스크롤 이벤트 처리기가 있을 가능성이 높기 때문이며, 모든 스크롤 처리기를 해제하여 다른 기능(알거나 알 수 없음)을 호스트하는 데는 관심이 없습니다.

제 해결책은 먼저 핸들러 기능을 명명된 기능으로 추상화하고 이벤트 수신기 설정에 사용하는 것이었습니다.

function handleScrollingForXYZ() { ...... }

$window.on('scroll', handleScrollingForXYZ);

그리고 조건부로, 우리가 그것을 취소해야 할 때, 저는 이렇게 했습니다.

$window.off('scroll', $window, handleScrollingForXYZ);

잔키 부분은 원래 선택기를 이중으로 선택하는 두 번째 파라미터입니다.그러나 .off()에 대한 jquery 문서는 제거할 핸들러를 지정하기 위한 하나의 메서드 서명만 제공하므로 이 중간 매개 변수는

원래 전달된 선택기와 일치해야 하는 선택기.on()이벤트 핸들러를 연결할 때.

저는 그것을 시험해 볼 용기가 없습니다.null또는''두 번째 매개 변수로, 하지만 아마도 중복일 수 있습니다.$window필요 없습니다.

언급URL : https://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery