Удалить делегат события из измененного элемента

Question

Удалить делегат события из измененного элемента

0

У меня модальный контент, динамический, и у этого модала есть кнопка отклонения.

Сам этот модал генерируется динамически по ссылке, поэтому мне нужно использовать делегат

$( "body" ).delegate( ".reject", "click", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

Пусть говорят, что пользователь нажимает кнопку отклонения и закрывает модальный. Затем она загружает новый модальный, поэтому этот модальный контекст меняется и имеет новую кнопку отклонения.

В тот момент, когда пользователь снова нажимает кнопку "Отменить" в этом новом контексте, как-то someFunction() выполняется дважды - один раз от исходного клика и второй из этого нового клика. Закройте модальный снова, загрузите новый контекст, выполните щелчок и вуаля.. получили три вызова someFunction()!

После некоторых исследований это то, что я нашел: когда элемент замены, что происходит с событиями и данными

Как предотвратить это?

a0z0ra 26 сен. 2013, в 02:34

Источник

Теги:

javascript

jquery

jquery-delegate

1 ответ

Ещё вопросы

jfriend00 · Accepted Answer · 2013-09-25T23-55-00.000Z

Во-первых, если ваши кнопки .reject во всех ваших диалогах имеют одинаковое поведение и имена классов, вы можете просто оставить один делегированный обработчик событий на месте, и вам не нужно его снова устанавливать или удалять. Красота использования делегированной обработки событий заключается в том, что целевые объекты могут приходить и уходить, а обработчик событий остается на месте просто отлично.

Если у вас есть причина удалить исходный обработчик событий и заменить его чем-то другим, и если вы переключитесь на использование .on() вместо .delegate() (текущий способ делать вещи в jQuery 1. 7+), то вы можете сделать это вот так:

$(document.body).on("click", ".reject", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

Затем вы можете удалить обработчик событий с помощью .off() следующим образом:

$(document.body).off("click", ".reject");

Или, если вы хотите удалить только один делегированный обработчик событий для этого события и селектора, вам нужно объявить функцию отдельно, а затем передать одну и ту же функцию для обоих .on() и .off().

function myHandler(e) {
    $(".modalInfo").hide();
    $(".modalReject").show();
    someFunction();
}

$(document.body).on("click", ".reject", myHandler);

Затем вы можете удалить только один обработчик событий с помощью .off() следующим образом:

$(document.body).off("click", ".reject", myHandler);

FYI, .delegate() был .on() на .on() с jQuery 1.7.

Круто, спасибо jfriend00. Я должен использовать делегат из-за jQuery 1.5, и они пока не хотят обновляться. Чтобы удалить делегата, я нашел эквивалент 'off', который является undelegate ().