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

있습니다 input type="image". 이것은 Microsoft Excel의 셀 노트처럼 작동합니다. 누군가 가이 텍스트 상자에 숫자를 입력하면에 input-image대한 이벤트 핸들러를 설정합니다 input-image. 그런 다음 사용자가를 클릭 image하면 데이터에 메모를 추가 할 수있는 팝업이 나타납니다.

내 문제는 사용자가 텍스트 상자에 0을 입력하면 input-image의 이벤트 핸들러 를 비활성화해야한다는 것 입니다. 나는 다음을 시도했지만 아무 소용이 없다.

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

jQuery ≥ 1.7

jQuery를 이후 이벤트 API가 업데이트 1.7로, .bind()/ .unbind()여전히 이전 버전과의 호환성을 위해 사용할 수 있지만 선호하는 방법은을 사용 ) (에 / () 오프 기능. 아래는 이제

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

그런 다음 두 클릭 이벤트가 모두 시작됩니다.

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

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

단일 이벤트를 추가 한 다음 추가했을 수있는 다른 이벤트를 제거하지 않고 이벤트를 제거하려는 경우 이벤트 이름 간격을 사용할 수 있습니다.

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

이벤트 만 제거하려면 :

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

이 질문에 대한 답변이 제공되지 않았지만 live () 메서드를 사용하여 이벤트를 활성화 / 비활성화 할 수도 있습니다 .

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

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

이 코드를 사용하면 #mydisablebutton을 클릭하면 #myimage 요소에 비활성화 된 클래스가 추가됩니다. 이렇게하면 선택기가 더 이상 요소와 일치하지 않고 'disabled'클래스가 제거되어 .live () 선택기가 다시 유효해질 때까지 이벤트가 시작되지 않습니다.

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

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

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

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

arguments.callee를 사용 하면 하나의 특정 익명 함수 처리기가 제거되어 주어진 이벤트에 대해 단일 시간 처리기가 있습니다. 이것이 다른 사람들을 돕기를 바랍니다.

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

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

jquery에서 동일한 객체 및 이벤트에 여러 이벤트 핸들러를 추가 할 수 있습니다. 이것은 새로운 것을 추가해도 기존의 것을 대체하지 않는다는 것을 의미합니다.

이벤트 네임 스페이스와 같은 이벤트 핸들러를 변경하기위한 몇 가지 전략이 있습니다. 온라인 문서에는 이것에 관한 몇 페이지가 있습니다.

이 질문을보십시오 (바인드 해제 방법을 배웠습니다). 답변에 이러한 전략에 대한 유용한 설명이 있습니다.

jquery에서 바운드 호버 콜백 함수를 읽는 방법

아마 바인딩 해제 방법이 당신을 위해 작동합니다

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

prop과 attr을 사용하여 이벤트를 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.

});​

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")

VoidKing은 위의 주석에서 이것을 조금 더 비스듬히 언급합니다.

2014 년 업데이트

최신 버전의 jQuery를 사용하면 이제 간단히 네임 스페이스에서 모든 이벤트를 바인딩 해제 할 수 있습니다. $( "#foo" ).off( ".myNamespace" );

인라인 클릭 이벤트를 제거하는 가장 좋은 방법은 $(element).prop('onclick', null);

에 remove ALL 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의에서 장소 original아니오 event-handlers거기에 있습니다.

행운을 빕니다...

정보 주셔서 감사합니다. 다른 사용자가 편집 모드에있는 동안 페이지 상호 작용을 잠그는 데 매우 유용했습니다. 나는 그것을 ajaxComplete와 함께 사용했다. 반드시 같은 동작은 아니지만 다소 비슷합니다.

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()방법 모두 작동 하지 않습니다 .

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

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

$(document).on()동적으로 작성된 요소에 리스너를 추가하는 데 사용 하는 경우 다음을 사용 하여 리스너를 제거해야 할 수 있습니다.

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

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

이것은 또한 잘 작동합니다. 간단하고 쉽습니다. http://jsfiddle.net/uZc8w/570/

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

당신은을 설정하는 경우 onclick를 통해 html당신이 필요removeAttr ($(this).removeAttr('onclick'))

jquery를 통해 설정 한 경우 (위의 예제에서 첫 번째 클릭 후) unbind($(this).unbind('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

클릭 이벤트 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>

버튼에서 간단히 제거하십시오.

$('.classname').click(function(){
$( ".classname" ).remove();
});