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

Question

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

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

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

Answer 1

jQuery ≥ 1.7

Начиная с версии jQuery 1.7, event 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

В вашем примере кода вы просто добавляете еще одно событие click к изображению, не переопределяя предыдущее:

$('#myimage').click(function() { return false; }); // Adds another click event

После этого будут запущены оба события click.

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

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

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

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

и удалить только ваше мероприятие:

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

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

});​

Answer 8

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

Answer 9

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

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

Answer 10

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

Answer 11

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

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

function executePageLock(){
    //do something
}

Answer 12

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

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

И то , и другое unbind() и .off() методы не являются иду на работу.

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

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

Answer 13

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

Удачи...

Answer 14

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

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

Answer 15

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

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

Answer 16

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

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

Мой обходной путь:

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

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

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

Answer 17

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

Answer 18

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

Answer 19

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

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

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