Лучший способ удалить обработчик событий в jQuery?
у меня есть input type="image"
. Это действует как примечания ячейки в Microsoft Excel. Если кто-то вводит число в текстовое поле, это input-image
в паре с, я настраиваю обработчик событий для input-image
. Затем, когда пользователь нажимает image
, они получают небольшое всплывающее окно, чтобы добавить некоторые заметки к данным.
моя проблема заключается в том, что когда пользователь вводит ноль в текстовое поле, мне нужно запретить input-image
'обработчик события. Я пробовал следующее, но безрезультатно.
$('#myimage').click(function { return false; });
18 ответов
jQuery ≥ 1.7
С jQuery 1.7 далее API событий был обновлен,.bind()
/.unbind()
по-прежнему доступны для обратной совместимости, но предпочтительный метод использует on ()/выкл() функции. Теперь внизу будет:
$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');
jQuery
в вашем примере кода, Вы просто добавляете еще одно событие click к изображению, не отменяя предыдущего:
$('#myimage').click(function() { return false; }); // Adds another click event
обе кнопку затем события будут уволены.
как люди сказали, Вы можете использовать unbind для удаления всех событий щелчка:
$('#myimage').unbind('click');
если вы хотите добавить одно событие, а затем удалить его (без удаления других, которые могли быть добавлены), то вы можете использовать пространство имен событий:
$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });
и удалить только ваше событие:
$('#myimage').unbind('click.mynamespace');
Это было недоступно, когда на этот вопрос был дан ответ, но вы также можете использовать live () метод для включения / выключения событий.
$('#myimage:not(.disabled)').live('click', myclickevent);
$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });
что произойдет с этим кодом, когда вы нажмете #mydisablebutton, он добавит класс disabled в элемент #myimage. Это сделает так, что селектор больше не соответствует элементу, и событие не будет запущено, пока класс "disabled" не будет удален .жить() селектор действует снова.
Это имеет и другие преимущества, добавляя стиль, основанный на этом классе.
Это можно сделать с помощью функции unbind.
$('#myimage').unbind('click');
вы можете добавить несколько обработчиков событий к одному объекту и событию в jquery. Это означает, что добавление нового не заменяет старых.
есть несколько стратегий, изменение обработчиков событий, таких как пространства имен событий. Есть несколько страниц об этом в онлайн-документации.
посмотрите на этот вопрос (вот как я узнал о unbind). Существует некоторое полезное описание этих стратегий в ответ.
Как читать связанные функции обратного вызова наведения в jquery
Если вы хотите ответить на событие только один раз следующий синтаксис должен быть действительно полезным:
$('.myLink').bind('click', function() {
//do some things
$(this).unbind('click', arguments.callee); //unbind *just this handler*
});
С помощью аргументов.Калли, мы можем гарантировать, что один конкретный обработчик анонимной функции удален и, таким образом, имеет один обработчик времени для данного события. Надеюсь, это поможет другим.
Я должен был установить событие в null, используя prop и attr. Я не мог сделать это ни с тем, ни с другим. Я тоже не мог попасть .отвяжитесь от работы. Я работаю над элементом TD.
.prop("onclick", null).attr("onclick", null)
вы можете добавить 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 упоминает об этом немного более косвенно в комментарии выше.
Если событие прилагается таким образом, и цель должна быть свободна:
$('#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.
});
обновлено для 2014
используя последнюю версию jQuery, вы теперь можете отменить все события в пространстве имен, просто выполнив $( "#foo" ).off( ".myNamespace" );
Спасибо за информацию. очень полезно я использовал его для блокировки взаимодействия страниц в режиме редактирования другим пользователем. Я использовал его в сочетании с ajaxComplete. Не обязательно одно и то же поведение, но что-то похожее.
function userPageLock(){
$("body").bind("ajaxComplete.lockpage", function(){
$("body").unbind("ajaxComplete.lockpage");
executePageLock();
});
};
function executePageLock(){
//do something
}
в случае .on()
метод ранее использовался с определенным селектором, как в следующем примере:
$('body').on('click', '.dynamicTarget', function () {
// Code goes here
});
и unbind()
и .off()
методы не иду на работу.
однако, .undelegate() метод может быть использован для полного удаления обработчика из события для всех элементов, которые соответствуют текущему селектору:
$("body").undelegate(".dynamicTarget", "click")
Это тоже отлично работает .Просто и легко.см.http://jsfiddle.net/uZc8w/570/
$('#myimage').removeAttr("click");
если вы выберите onclick
via html
вам нужно removeAttr ($(this).removeAttr('onclick'))
если вы установите его через jQuery (как после первого клика в моих примерах выше), то вам нужно unbind($(this).unbind('click'))
до 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
на нем.
Удачи...
Надеюсь, мой код ниже объясняет все. 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>
Я знаю, что это происходит поздно, но почему бы не использовать простой 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
все описанные подходы не работали для меня, потому что я добавлял событие 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");
надеюсь, что это поможет.