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

У меня есть input type="image". Это действует как заметки ячейки в Microsoft Excel. Если кто-то вводит число в текстовое поле, с которым сопряжен этот input-image, я настраиваю обработчик событий для input-image. Затем, когда пользователь нажимает кнопку image, они получают небольшое всплывающее окно, чтобы добавить некоторые примечания к данным.

Моя проблема в том, что когда пользователь вводит нуль в текстовое поле, мне нужно отключить обработчик события input-image. Я пробовал следующее, но безрезультатно.

$('#myimage').click(function { return false; });
1011
16 окт. '08 в 18:28
источник поделиться
18 ответов

jQuery ≥ 1.7

С обновлением 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

Затем будут запущены оба события щелчка.

Как говорили люди, вы можете использовать unbind для удаления всех событий click:

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

Если вы хотите добавить одно событие, а затем удалить его (без удаления каких-либо других, которые могли быть добавлены), вы можете использовать пространство имен событий:

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

и удалить только ваше событие:

$('#myimage').unbind('click.mynamespace');
1551
17 окт. '08 в 0:13
источник

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

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

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

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

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

60
23 июля '09 в 20:57
источник

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

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

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

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

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

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

37
16 окт. '08 в 18:35
источник

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

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

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

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

34
05 авг. '11 в 10:29
источник

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

$("#myimage").unbind("click");
30
16 окт. '08 в 18:31
источник

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

.prop("onclick", null).attr("onclick", null)
29
28 марта '12 в 17:44
источник

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

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

});​
11
26 июня '12 в 16:02
источник

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

10
22 янв. '14 в 1:25
источник

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

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

9
05 февр. '14 в 14:39
источник

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

7
02 янв. '15 в 17:43
источник

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

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

function executePageLock(){
    //do something
}
6
03 июля '10 в 0:54
источник

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

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

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

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

$("body").undelegate(".dynamicTarget", "click")
5
27 июня '16 в 13:11
источник

Чтобы remove ВСЕ event-handlers, вот что у меня сработало:

Удалить все обработчики событий означает иметь простую HTML structure без всех event handlers прикрепленных к element и его child nodes. Для этого помог jQuery 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);

При этом вместо original у нас будет clone без event-handlers.

Удачи...

5
12 дек. '17 в 10:18
источник

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

$('#myimage').removeAttr("click");
3
15 июня '13 в 15:31
источник

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

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

2
02 сент. '14 в 9:53
источник

Я знаю, что это происходит поздно, но почему бы не использовать простой 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
1
05 сент. '16 в 17:24
источник

Надеюсь, что мой нижний код объясняет все. 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>
1
22 дек. '15 в 11:28
источник

Все описанные подходы не работали для меня, потому что я добавлял событие 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");

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

0
12 февр. '14 в 11:00
источник

Посмотрите другие вопросы по меткам или Задайте вопрос