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

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

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

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

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');
1433
ответ дан samjudson 17 окт. '08 в 0:13
источник поделиться

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

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

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

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

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

56
ответ дан MacAnthony 23 июля '09 в 20:57
источник поделиться

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

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

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

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

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

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

34
ответ дан Mnebuerquo 16 окт. '08 в 18:35
источник поделиться

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

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

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

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

33
ответ дан ghayes 05 авг. '11 в 10:29
источник поделиться

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

$("#myimage").unbind("click");
30
ответ дан John Boker 16 окт. '08 в 18:31
источник поделиться

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

.prop("onclick", null).attr("onclick", null)
28
ответ дан dwhittenburg 28 марта '12 в 17:44
источник поделиться

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

9
ответ дан davaus 22 янв. '14 в 1:25
источник поделиться

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

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

});​
9
ответ дан user669677 26 июня '12 в 16:02
источник поделиться

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

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

9
ответ дан alexpls 05 февр. '14 в 14:39
источник поделиться

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

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

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

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

5
ответ дан Shahrukh Azeem 02 янв. '15 в 17:43
источник поделиться

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

$('#myimage').removeAttr("click");
2
ответ дан Somnath Kharat 15 июня '13 в 15:31
источник поделиться

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

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

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

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

$("body").undelegate(".dynamicTarget", "click")
2
ответ дан Ilia Rostovtsev 27 июня '16 в 13:11
источник поделиться

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

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

2
ответ дан Ishan Liyanage 02 сент. '14 в 9:53
источник поделиться

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

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

Все описанные подходы не работали для меня, потому что я добавлял событие 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
ответ дан Kai Noack 12 февр. '14 в 11:00
источник поделиться

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