Найкращий спосіб видалити обробник подій в jQuery?

У мене є input type="image". Це діє як примітки до комірок у Microsoft Excel. Якщо хтось вводить число в текстове поле, з яким це input-imageпарно, я встановлюю обробник подій для input-image. Потім, коли користувач натискає кнопку image, вони отримують невелике спливаюче вікно, щоб додати деякі дані до даних.

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

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

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

Після цього обидва події клацання будуть звільнені.

Як люди заявляли, ви можете скористатися відключенням, щоб видалити всі події натискання:

$('#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 він додасть клас відключений до елемента #myimage. Це зробить так, що селектор більше не відповідає елементу, і подія не буде запущена, поки не буде видалено клас "інвалід", що робить селектор .live () знову дійсним.

Це має й інші переваги, додаючи також стиль на основі цього класу.

Якщо ви хочете відповісти на подію лише один раз , такий синтаксис повинен бути дуже корисним:

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

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

Використовуючи argument.callee , ми можемо забезпечити видалення одного конкретного обробника анонімних функцій і, таким чином, мати єдиний обробник часу для даної події. Сподіваюся, що це допомагає іншим.

Це можна зробити за допомогою функції відв’язування.

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

Ви можете додати декілька обробників подій до одного об’єкта та події в jquery. Це означає, що додавання нового не замінює старі.

Існує кілька стратегій зміни обробників подій, наприклад, простори імен подій. Про це є кілька сторінок в онлайн-документах.

Подивіться на це питання (саме так я дізнався про розв’язування). У відповідях є корисний опис цих стратегій.

Як читати зв'язані функції зворотного виклику в jquery

можливо, метод відв’язування вам підійде

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

Мені довелося встановити подію на нуль за допомогою опори та attr. Я не міг зробити це з тим чи іншим. Я також не міг дістати .незалежно працювати. Я працюю над елементом TD.

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

Якщо подія приєднана таким чином , а ціль має бути неприєднаною:

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

});​

Ви можете додавати 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 згадує про це трохи більше косо в коментарі вище.

Оновлено до 2014 року

Використовуючи останню версію jQuery, тепер ви можете від’єднати всі події на просторі імен, просто зробивши це $( "#foo" ).off( ".myNamespace" );

Найкращий спосіб видалити вбудовану подію onclick - це $(element).prop('onclick', null);

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

Щасти...

Спасибі за інформацію. дуже корисно, що я використовував його для блокування взаємодії сторінки, перебуваючи в режимі редагування іншим користувачем. Я використовував його спільно з 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")

Якщо ви $(document).on()хочете додати слухача до динамічно створеного елемента, то, можливо, доведеться використовувати його для видалення:

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

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

Це також чудово працює. Просто і просто. Подивіться http://jsfiddle.net/uZc8w/570/

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

якщо ви встановите з onclickдопомогою htmlвам потрібноremoveAttr ($(this).removeAttr('onclick'))

якщо ви встановите його за допомогою jquery (як після першого клацання в моїх прикладах вище), тоді вам це потрібно unbind($(this).unbind('click'))

Я знаю, що це відбувається пізно, але чому б не використовувати звичайний 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

Всі описані підходи для мене не працювали, тому що я додавав подію клацання on()в документ, де елемент був створений під час виконання:

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

Моє вирішення:

Оскільки я не міг розв'язати клас ".button", я просто призначив ще один клас кнопці, яка мала ті ж стилі CSS. Роблячи це, обробник наживо / на подію остаточно проігнорував натискання:

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

Сподіваюся, що це допомагає.

Сподіваюся, мій нижче код пояснює все. 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>

Просто просто видаліть це з кнопки:

$('.classname').click(function(){
$( ".classname" ).remove();
});