Удаление обработчиков событий

Для удаления обработчиков событий предназначен метод off(). Форматы метода:

off()
off(<Тип события>[, <Селектор>][, <Обработчик>])
off(<Объект>[, <Селектор>])
off(<Объект event>)

Если параметры не указаны, то удаляются все обработчики событий. Назначим два обработчика щелчка на кнопке, а при щелчке на второй кнопке удалим обработчики:

<input type="button" value="Нажми меня" id="btn1">
<input type="button" value="Удалить обработчик" id="btn2">

function click1() {
   console.log('Нажата кнопка. click1()');
}
function click2() {
   console.log('Нажата кнопка. click2()');
}
$('#btn1').on('click', click1).on('click', click2);
$('#btn2').on('click', function() {
   $('#btn1').off();
   this.disabled = true;
   console.log('Обработчики удалены');
});

Если щелкнуть на кнопке Нажми меня, то получим два сообщения:

Нажата кнопка. click1()
Нажата кнопка. click2()

После щелчка на кнопке Удалить обработчик все обработчики будут удалены. Чтобы пользователь не мог щелкнуть на кнопке еще раз, мы внутри обработчика присваиваем свойству disabled значение true, делая кнопку недоступной. Теперь при щелчке на кнопке Нажми меня никаких сообщений не будет.

В предыдущем примере будут удалены вообще все обработчики событий, а не только обработчики события onclick. Для удаления обработчиков указанного события нужно передать его название в параметре <Тип события>:

$('#btn2').on('click', function() {
   $('#btn1').off('click');
   this.disabled = true;
   console.log('Обработчики удалены');
});

Можно указать сразу несколько событий через пробел:

$('#btn1').off('click mousedown');

Если в параметре <Обработчик> указать название функции, то будет удален только обработчик с таким названием. Удалим обработчик с названием click2:

$('#btn2').on('click', function() {
   $('#btn1').off('click', click2);
   this.disabled = true;
   console.log('Обработчик удален');
});

Если щелкнуть на кнопке Нажми меня, то получим два сообщения:

Нажата кнопка. click1()
Нажата кнопка. click2()

В результате щелчка на кнопке Удалить обработчик будет удален обработчик события с названием click2. Теперь после щелчка на кнопке Нажми меня получим только одно сообщение:

Нажата кнопка. click1()

Обратите внимание: при назначении и удалении обработчиков мы указывали ссылки на функции, а не использовали анонимные функции. Для удаления обработчика нужно обязательно иметь ссылку на функцию, которая была назначена ранее обработчиком. Поэтому при назначении обработчика следует использовать либо обычные функции, либо сохранять ссылку на анонимную функцию в какой-либо переменной, если планируете удалять обработчик.

В параметре <Объект> можно указать объект с названиями событий и ссылками на удаляемые обработчики. Удалим обработчик с названием click2:

$('#btn1').off( { click: click2 } );

Если при назначении обработчика вместо ссылки на функцию указывалось значение false, то при удалении обработчика также следует указать значение false:

<a href="#">Текст ссылки</a>
<input type="button" value="Удалить обработчик" id="btn">

$('a').on('click', false);
$('#btn').on('click', function() {
   $('a').off('click', false);
   this.disabled = true;
   console.log('Обработчик удален');
});

Для удаления обработчиков делегированных событий, следует дополнительно указать параметр <Селектор>:

<input type="button" value="Кнопка">
<input type="button" value="Удалить обработчик" id="btn">

function click1() {
   var html = '<input type="button" value="Новая кнопка">';
   $(this).after('<br>' + html);
}
$(document).on('click', ':button', click1);
$('#btn').on('click', function() {
   $(document).off('click', ':button', click1);
   this.disabled = true;
   console.log('Обработчик удален');
});

Чтобы удалить все обработчики делегированных событий, нужно в параметре <Селектор> указать значение "**":

$(document).off('click', '**');

В параметре <Тип события> помимо названия события можно указать название пространства имен. Удалим обработчик пользовательского события с пространством имен:

<div id="div1"></div>
<input type="button" value="Сгенерировать событие" id="btn1">
<input type="button" value="Удалить обработчик" id="btn2">

var handler1 = function(e) {
   console.log('Обработка собственного события');
   console.log('Пространство имен: ' + e.namespace);
};
$('#div1').on('myEvent.myNamespace', handler1);
$('#btn1').on('click', function() {
   $('#div1').trigger('myEvent.myNamespace'); // Вызов события
});
$('#btn2').on('click', function() {
   $('#div1').off('myEvent.myNamespace', handler1);
   this.disabled = true;
   console.log('Обработчик удален');
});

Если указать только название пространства имен, то будут удалены все обработчики для событий с этим пространством имен:

$('#div1').off('.myNamespace');

Четвертый формат метода off() позволяет удалить обработчик, указав в качестве параметра объект события. Удалим обработчик после нажатия кнопки:

<input type="button" value="Нажми меня" id="btn">

$('#btn').on('click', function(e) {
   console.log('Нажата кнопка');
   $(this).off(e);
});

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов