JavaScript не запускается после добавления

Я пытаюсь создать форму, которая позволяет пользователю редактировать ввод через новое окно. PHP обработает вход, а затем добавит новый ввод с новыми значениями. По-видимому, когда я пытаюсь редактировать добавленный ввод, JavaScript просто не срабатывает. Пожалуйста, просветите меня, что я сделал не так. Это мой html-код:

    $(document).ready(function(){ $('.races').click(function(e){ console.log("Inside Testing"); e.preventDefault(); var currID = this.id; var content = '
Race:
'; childWin = window.open('', "_blank", "height=400, width=550, status=yes, toolbar=no, menubar=no, location=no,addressbar=no"); toBeAdded = $(this).closest('div'); childWin.document.close(); childWin.document.write(content); popupRace = childWin.document.getElementById("race"); parentRace = document.getElementById(currID); transferValues(); }) }); function transferValues() { popupRace.value = parentRace.value; } function setValue(text) { childWin.close(); toBeAdded.parent().append(text); toBeAdded.remove(); }
Name:
race: Human Edit
Name:
race: God Edit

И это мой php-код:

 <?php $postDataKey = array_keys($_POST); $text = ""; foreach ( $postDataKey as $currPostKey ) { $currValue = $_POST[$currPostKey]; $text .= '
'.$currPostKey.': '.$currValue.' Edit
'; } echo ' window.opener.setValue(\''.$text.'\'); ' ; ?>

jQuery знает только о элементах страницы на момент запуска, поэтому новые элементы, добавленные в DOM, не распознаются jQuery. Для борьбы с этим использованием делегирования событий, барботирование событий из вновь добавленных элементов до точки в DOM, которая была там, когда jQuery выполнялся при загрузке страницы. Многие люди используют document в качестве места, чтобы поймать событие с пузырьками, но нет необходимости идти так высоко в дерево DOM. В идеале вам следует делегировать ближайший родитель, который существует во время загрузки страницы.

Вероятно, вы захотите изменить обработчики событий, чтобы они использовали метод on() .

Это было решено в более старых версиях jQuery с live функцией, противоположной функции bind .

  • Функция bind привязывала событие ко всем соответствующим элементам, если они существовали в момент выполнения. Любой элемент, добавленный впоследствии, будет исключен.
  • live funciton присоединяет событие к любому совпадающему элементу, даже если элемент был создан после выполнения команды.

В текущей версии jQuery bind и live были заменены on . Поведение по умолчанию on() похоже на bind . К счастью, есть способ использовать так, чтобы он работал как live .

Я написал статью об этом , что может помочь вам понять, как это сделать.

Подвести итог…

 // This behaves like `bind` $(".clickable").on("click", function(){...}); // This behaves like `live` $(".parent-element").on("click", ".clickable", function(){...}); 

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

jQuery on Method – это то, что вы ищете; щелкните ссылку и найдите делегированные события.

«Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже».