0

Допустим в коде с помощью JQuery есть событие нажатия на элемент id='button':

$(function (){$('#button').click(function() {
    alert('на меня нажали');
    }); 
});

Код прекрасно работает и все счастливы, но если элемент #button был удален и снова создан с помощью .innerHTML или к примеру его id был сменен на другой, а потом заменен обратно на #button, то выше написанная функция перестает работать. Будто бы JQuery считает, что #button больше нет. Вопрос: что это за явление и как его можно избежать? Если нельзя, то как можно реанимировать работу функции без обновления страницы?

добавлено: вопрос пересекается с этим вопросом, но у меня вопрос о том, как заставить фнкцию работать после изменений или найти альтернативу, а там стоит вопрос об принципе работы "делегирования (delegation) и пересвязывания (rebinding)". Тем не менее может помочь в решение этого вопроса.

5
  • 2
    почитайте про делегирование событий
    – lexxl
    25 авг 2016 в 20:45
  • 1
    Возможный дубликат вопроса: Работа с динамически добавленными элементами в jQuery (delegation, rebinding)
    – Grundy
    25 авг 2016 в 22:17
  • @Grundy совсем не дубликат. Там вопрос "как оно работает", а тут "как это сделать". 26 авг 2016 в 5:22
  • @PavelMayorov, а разве зная как оно работает будет проблемой понять как это сделать? :-)
    – Grundy
    26 авг 2016 в 6:07
  • @Grundy в ответе на тот вопрос нет даже ни одного примера кода! Потому что тот, кто спрашивал - был, что называется, "в теме". Тот, кто спрашивает "как это сделать" - не поймет из объяснений "как это работает" вообще ничего. 26 авг 2016 в 6:59

2 ответа 2

2

Описанная вами функция jQuery выполнится единоразово, сразу после загрузки страницы. Если после этого удалить со страницы, элемент который был подписан на событие, а потом снова его создать. То для вновь созданного элемента, подписки на нужное вам событие еще не существует. Ее нужно выполнить снова.

Во время вставки в документ элемента button, после очередного его удаления, одновременно с этими действиями выполните подписку на событие которое вам необходимо. Другими словами, в коде JS, где описывается вставка эдемента button, вставьте функцию, которая снова выполнит подписку данного элемента на нужное вас событие.

2
  • 1
    Спасибо за ответ. Данное решение с повторным вызовом функции вслед за изменениями элемента помогло. Остановился бы на этом, если бы не упоминание функции .on(). 26 авг 2016 в 6:26
  • Я объяснил, почему оно не работает =) Вариант, предложенный с обработкой события клика по кнопке в элементе верхнего уровня (body) тоже правильный. При его использовании не имеет значение, какую бы вы использованли функцию для обработки события .on() или .click(), результат был бы одинаков. 26 авг 2016 в 6:37
1

Используйте следующий вариант

$(document).on('click', '#button', function() {
     alert('на меня нажали');
});
4
  • Спасибо, помогло. Применил. 26 авг 2016 в 6:22
  • @Владислав Климов, незачто 26 авг 2016 в 6:42
  • Ожидание ready тут было лишнее. 26 авг 2016 в 7:01
  • @ВладиславКлимов обратите внимание на исправление 26 авг 2016 в 7:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.