jquery удалить обработчик события

103
06 марта 2022, 15:40

Решил недавно заюзать для сайта pjax.

Есть следующий код 

function resetEvents() {
    $(document).off('click', '[data-type="get_form"]')
}
....
$(document).on('click', '[data-type="get_form"]', handler)
$(document).on('click', '[data-type="ajax"]', handler)
$(document).on('click', '[data-type="delete"]', handler)
.....

Код рабочий но для каждого on надо писать свой off. Но так как скрипты уже прописаны давно и их сотни полностью переделывать не хочется.

Я пробовал делать так

$(document).off('click', '#container *')

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

Какой вариант может быть для решения такой задачи? Или придется переписывать все?

Answer 1

function handler() { 
  console.log("click"); 
} 
 
function clickOn() { 
  $(document).on('click', '[data-type="get_form"]', handler); 
} 
 
function clickOff() { 
  $(document).off('click', handler); 
}
[data-type="get_form"] { 
  width: 100px; 
  height: 100px; 
  background: lightgreen; 
  border: 1px solid black; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div data-type="get_form"></div> 
<br/> 
<button onclick="clickOn()">ON</button> 
<button onclick="clickOff()">OFF</button>

после перехода на другую страницу и обратно кнопки начинают срабатывать по несколько раз

Вот с этим и надо разбираться.

Answer 2

Я понимаю, что уже наверно не актуально, но может поможет другим.

Для меня работает подобная схема:

$('a[href], button').off("click.unique_namespace").on({
  'click.unique_namespace': event => { /* ваша анонимная функция */ }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

Тут unique_namespace - пространство имен, уникальное для каждой вашей анонимной функции. Если лямбд действительно очень много, то можно генерировать это пространство имен как довольно большую случайную последовательность

const current_namespace = Math.random() * Math.random();
$('a[href], button').off(`click.${current_namespace}`).on({
  `click.${current_namespace}`: event => { /* ваша анонимная функция */ }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

Или любым другим образом.

Можно также завести счетчик и тем самым обеспечить уникальность пространства имен.

READ ALSO
Вывести дату в DatePicker
jQuery

Вывести дату в DatePicker

jQuery UI Datepicker

 89
Как оптимизировать проверку условий в форме?
jQuery

Как оптимизировать проверку условий в форме?

Помогите, пожалуйста, оптимизировать код проверки условий на странице оформления заказа

 230
SQL запрос на выборку складов
MySQL

SQL запрос на выборку складов

Например, имеется много складов и таблица в которой каждая запись отражает на каком складе конкретный товар и сколько штукОдин товар может...

 95
MySQL составной запрос
MySQL

MySQL составной запрос

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

 84