off()

посл. ред. 23.08.2016

Метод off() используется для удаления обработчиков событий, установленных с помощью метода on(). Какие именно обработчики необходимо удалить, определяется переданными аргументами. Если указано несколько аргументов, тогда удалены будут только те обработчики, которые при установке имели такие же параметры.

Варианты использования

jQ_object.off() => jQuery: Удаляет обработчики всех событий.
jQ_object.off(имя_события[, селектор][, обработчик]) => jQuery: Удаляет обработчики, которые при установке соответствовали всем указанным параметрам.
jQ_object.off({ имя_события-1: обработчик-1, имя_события-2: обработчик-2, ...}[, селектор]) => jQuery: Удаляет обработчики, которые при установке соответствовали всем указанным параметрам.
jQ_object.off(объект_события) => jQuery: Удаляет обработчики текущего события. Вся необходимая информация (имя_события, селектор, обработчик) берётся из объекта события.

имя_события

Строка, в которой через пробел указаны названия событий. В названии события можно использовать пространства имён или можно указать только пространство имён. Примеры:

$('#button').on({
  'click': handler_1,
  'click.name': handler_2,
  'mouseover.name': handler_3
});
/* Элементу с id='button' установлено 3 обработчика */

$('#button').off('click');
/* Будут удалены оба обработчика события click */

$('#button').off('.name');
/* Будут удалены оба обработчика с пространством имён name */

селектор

Селектор, который должен полностью совпадать с тем, который был указан при установке обработчика. Данный параметр указывается, когда необходимо удалить именно делегированный обработчик события. Чтобы удалить все делегированные обработчики события, в качестве селектора необходимо указать строку **. Примеры:

$('ul').on('click', 'li', handler_1);
$('ul').on('click', 'a', handler_2);
/* Элементу <ul> установлено 2 делегированных обработчика */

$('ul').off('click', 'li');
/* Будет удалён обработчик handler_1 */

$('ul').off('click', '**');
/* Будут удалены обработчики handler_1 и handler_2 */

обработчик

Функция, которая была указана при установке обработчика, или значение false. Данный параметр указывается для конкретизации удаляемого обработчика. Примеры:

$('button').on('click', handler_1);
$('button').on('click', handler_2);
/* Элементу <button> установлено 2 обработчика */

$('button').off('click');
/* Будут удалены обработчики handler_1 и handler_2 */

$('button').off('click', handler_1);
/* Будет удалён обработчик handler_1 */

Примеры

<html>
<head>
  <title>Работа с событиями в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>Добавить рамку</button>
  <p>Параграф</p>
</body>
</html>
 
<script>
/* Устанавливает рамку и меняет обработчик кнопки */
function addBorder() {
  $('p').css('border', '2px solid red');
  $('button')
    .off('click')
    .on('click', removeBorder)
    .text('Удалить рамку');
}
/* Убирает рамку и меняет обработчик кнопки */
function removeBorder() {
  $('p').css('border', '');
  $('button')
    .off('click')
    .on('click', addBorder)
    .text('Добавить рамку');
}

$('button').on('click', addBorder);
</script>

Параграф