를 제거하는 가장 좋은 방법의 이벤트 처리기 jQuery?

Question

가 input type="image".이처럼 세포에서 메모 Microsoft Excel.만약 누군가가 들어가 번호를 텍스트 상자에 이 input-image 은,나는 설정의 이벤트 처리기 input-image.다음 클릭할 때 image, 지 팝업을 몇 가지 메모를 추가하는 데이터입니다.

나의 문제는 경우 사용자가 제로 텍스트 상자가 사용하지 않도록 설정할 필요가 input-image's 이벤트 처리기입니다.내가 노력 다음,그러나무 소용이 없습니다.

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

Answer 1

jQuery ≥ 1.7

jQuery 1.7 이후 이벤트 API가 업데이트되었습니다. .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');

Answer 2

이것은이 질문에 답할 때 사용할 수 없었지만 라이브() 이벤트를 활성화/비활성화하는 방법.

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

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

이 코드에서 발생하는 것은 #MyDisableButton을 클릭하면 #MyImage 요소에 클래스를 추가한다는 것입니다. 이렇게하면 선택기가 더 이상 요소와 일치하지 않고 '비활성화 된'클래스가 제거 될 때까지 이벤트가 해고되지 않도록합니다.

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

Answer 3

이는 Unbind 기능을 사용하여 수행 할 수 있습니다.

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

jQuery의 동일한 객체 및 이벤트에 여러 이벤트 처리기를 추가 할 수 있습니다. 이것은 새로운 것을 추가한다고해서 오래된 것을 대체하지 않는다는 것을 의미합니다.

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

이 질문을 살펴보십시오. 답변에는 이러한 전략에 대한 유용한 설명이 있습니다.

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

Answer 4

이벤트에 응답하려면 한번 만, 다음 구문은 정말 도움이되어야합니다.

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

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

사용 arguments.callee, 우리는 하나의 특정 익명 기능 핸들러가 제거되도록 할 수 있으므로 주어진 이벤트에 대해 단일 핸들러가 있습니다. 이것이 다른 사람들을 돕기를 바랍니다.

Answer 5

어쩌면 undind 방법이 당신을 위해 작동 할 것입니다

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

Answer 6

소품과 attr을 사용하여 이벤트를 NULL로 설정해야했습니다. 나는 하나 또는 다른 사람과 함께 할 수 없었습니다. 나는 또한 .unbind를 일할 수 없었습니다. 나는 TD 요소에서 일하고있다.

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

Answer 7

는 경우 이벤트가 부착된 이 방법,그리고 대상을 연결되지 않은:

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

});​

Answer 8

당신은 추가 할 수 있습니다 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은 위의 의견에서 이것을 조금 더 비스듬히 언급합니다.

Answer 9

2014 년에 업데이트되었습니다

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

Answer 10

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

Answer 11

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

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

function executePageLock(){
    //do something
}

Answer 12

경우에 .on() 방법은 다음 예에서와 같이 특정 선택기와 함께 이전에 사용되었습니다.

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

둘 다 unbind() 그리고 .off() 행동 양식 그렇지 않습니다 일하러갑니다.

하지만, .undelegate () 메소드는 현재 선택기와 일치하는 모든 요소에 대한 이벤트에서 핸들러를 완전히 제거하는 데 사용될 수 있습니다.

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

Answer 13

에게 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 대신 original NO event-handlers 그 위에.

행운을 빕니다...

Answer 14

이것은 또한 잘 작동합니다 .Simple과 Easy.e 참조 http://jsfiddle.net/uzc8w/570/

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

Answer 15

당신이 설정하면 onclick ~을 통해 html 당신은 필요합니다 removeAttr ($(this).removeAttr('onclick'))

jQuery를 통해 설정하면 (위의 첫 번째 예제를 클릭 한 후) unbind($(this).unbind('click'))

Answer 16

묘사 된 모든 접근 방식은 클릭 이벤트를 추가했기 때문에 나에게 효과가 없었습니다. on() 런타임에 요소가 생성 된 문서로

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

내 해결 방법 :

".button"클래스를 풀 수 없으므로 동일한 CSS 스타일이있는 버튼에 다른 클래스를 할당했습니다. 그렇게함으로써 라이브/이벤트 핸들러는 마지막으로 클릭을 무시했습니다.

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

도움이되기를 바랍니다.

Answer 17

내 코드가 모두 설명되기를 바랍니다. 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>

Answer 18

나는 이것이 늦게 나온다는 것을 알고 있지만 왜 일반 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

Answer 19

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

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

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