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 you have read our privacy policy.

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