Лучший способ удалить обработчик событий в jQuery? - PullRequest
1015 голосов
/ 16 октября 2008

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

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

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

Ответы [ 19 ]

1556 голосов
/ 17 октября 2008

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 </h2> В вашем примере кода вы просто добавляете еще одно событие клика к изображению, не переопределяя предыдущее: $('#myimage').click(function() { return false; }); // Adds another click event Оба события клика будут запущены. Как уже говорили, вы можете использовать unbind для удаления всех событий клика: $('#myimage').unbind('click'); Если вы хотите добавить одно событие, а затем удалить его (не удаляя другие, которые могли быть добавлены), вы можете использовать пространство имен событий: $('#myimage').bind('click.mynamespace', function() { /* Do stuff */ }); и удалить только ваше событие: $('#myimage').unbind('click.mynamespace');

60 голосов
/ 23 июля 2009

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

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

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

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

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

37 голосов
/ 16 октября 2008

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

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

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

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

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

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

34 голосов
/ 05 августа 2011

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

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

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

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

30 голосов
/ 16 октября 2008

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

$("#myimage").unbind("click");
29 голосов
/ 28 марта 2012

Мне пришлось установить событие равным нулю, используя реквизит и атрибут. Я не мог сделать это с одним или другим. Я также не мог заставить .unbind работать. Я работаю над элементом TD.

.prop("onclick", null).attr("onclick", null)
11 голосов
/ 26 июня 2012

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

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

});​
10 голосов
/ 22 января 2014

Возможно, вы добавляете обработчик 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 голосов
/ 05 февраля 2014

Обновлено за 2014 год

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

7 голосов
/ 02 января 2015

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

...