Лучший способ удалить обработчик событий в jQuery?

Это было недоступно, когда на этот вопрос был дан ответ, но вы также можете использовать live () метод для включения / выключения событий.

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

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

что произойдет с этим кодом, когда вы нажмете #mydisablebutton, он добавит класс disabled в элемент #myimage. Это сделает так, что селектор больше не соответствует элементу, и событие не будет запущено, пока класс "disabled" не будет удален .жить() селектор действует снова.

Это имеет и другие преимущества, добавляя стиль, основанный на этом классе.

Это можно сделать с помощью функции unbind.

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

вы можете добавить несколько обработчиков событий к одному объекту и событию в jquery. Это означает, что добавление нового не заменяет старых.

есть несколько стратегий, изменение обработчиков событий, таких как пространства имен событий. Есть несколько страниц об этом в онлайн-документации.

посмотрите на этот вопрос (вот как я узнал о unbind). Существует некоторое полезное описание этих стратегий в ответ.

Как читать связанные функции обратного вызова наведения в jquery

Если вы хотите ответить на событие только один раз следующий синтаксис должен быть действительно полезным:

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

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

С помощью аргументов.Калли, мы можем гарантировать, что один конкретный обработчик анонимной функции удален и, таким образом, имеет один обработчик времени для данного события. Надеюсь, это поможет другим.

возможно, метод unbind будет работать для вас

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

Я должен был установить событие в null, используя prop и attr. Я не мог сделать это ни с тем, ни с другим. Я тоже не мог попасть .отвяжитесь от работы. Я работаю над элементом TD.

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

вы можете добавить 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 упоминает об этом немного более косвенно в комментарии выше.

Если событие прилагается таким образом, и цель должна быть свободна:

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

});​

обновлено для 2014

используя последнюю версию jQuery, вы теперь можете отменить все события в пространстве имен, просто выполнив $( "#foo" ).off( ".myNamespace" );

Спасибо за информацию. очень полезно я использовал его для блокировки взаимодействия страниц в режиме редактирования другим пользователем. Я использовал его в сочетании с ajaxComplete. Не обязательно одно и то же поведение, но что-то похожее.

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

function executePageLock(){
    //do something
}

лучший способ удалить встроенное событие onclick -$(element).prop('onclick', null);

в случае .on() метод ранее использовался с определенным селектором, как в следующем примере:

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

и unbind() и .off() методы не иду на работу.

однако, .undelegate() метод может быть использован для полного удаления обработчика из события для всех элементов, которые соответствуют текущему селектору:

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

Это тоже отлично работает .Просто и легко.см.http://jsfiddle.net/uZc8w/570/

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

если вы выберите onclick via html вам нужно removeAttr ($(this).removeAttr('onclick'))

если вы установите его через jQuery (как после первого клика в моих примерах выше), то вам нужно unbind($(this).unbind('click'))

до 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 С event-handlers на нем.

Удачи...

Надеюсь, мой код ниже объясняет все. 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>

Я знаю, что это происходит поздно, но почему бы не использовать простой 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

все описанные подходы не работали для меня, потому что я добавлял событие click с on() к документу, где элемент был создан во время выполнения:

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

мое решение:

как я не мог разомкнуть ".класс "button" я только что назначил другой класс кнопке, у которой были те же стили CSS. При этом обработчик live / on-event проигнорировал щелчок, наконец:

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

надеюсь, что это поможет.