.on ('click') с подстановочным знаком, который не делегируется должным образом

Question

Постараюсь сохранить это простым, чтобы его не слишком много читалось

У меня есть простая страница со следующим ...

$divid = 'append_here_$x;
$clickme = 'click_$x';

<div id='$clickme'>Click Me</div>

<div id='$divid'></div>

Затем у меня есть отдельный php-файл, который создает контент в цикле while, генерируя уникальный идентификатор для каждого div.

while ...
   $imgid = 'imgid_$z'  ...
   <div id='$imgid'>This was appended</div>

Наконец, у меня есть это только для тестирования и краткости

$( "[id^='imgid_']").on( "click", function() {
  alert('you clicked me');
});

Это выше работает нормально по большей части. Если вы щелкнете по click me, он выполнит ajax-вызов и отправит сообщение в файл с циклом while, вернет данные и добавит их в раздел append_here_ div. Проблема заключается в том, что новые добавленные данные также имеют идентификатор, поэтому вы можете нажать на них, а не просто на щелчок.

Answer 1

Способ, которым вы связываете событие click с элементами страницы, не будет работать для элементов, добавленных позже. Вы связываете событие с элементами, присутствующими к тому моменту, когда вы определяете события щелчка, но если вы добавите элементы позже, они не будут иметь события на них. Вы могли бы сделать:

$(document).on('click', '[id^="imgid_"]', function() {
  alert('you clicked me');
});

Таким образом, событие будет в документе, который присутствует при запуске, и каждый раз, когда вы нажимаете, он проверяет селектор (второй параметр), поэтому новые элементы будут реагировать на щелчок.