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

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

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

Это можно сделать с помощью функции отмены привязки.

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

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

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

Взгляните на этот вопрос (вот как я узнал об отвязке). В ответах есть полезное описание этих стратегий.

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

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');

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

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

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

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

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

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

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

function executePageLock(){
    //do something
}

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

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

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

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

Мне пришлось установить для события значение 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.

});​

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

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

Вы можете добавить обработчик 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" );

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

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

Мое обходное решение:

Поскольку я не мог отвязать класс «.button», я просто назначил другой класс кнопке с такими же стилями CSS. Поступая таким образом, обработчик события в реальном времени или по событию наконец проигнорировал щелчок:

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

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

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

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

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

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

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

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

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

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

$("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

Для 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 на нем.

Удачи...

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

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

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

Просто удалите это с кнопки:

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