Я пытаюсь создать форму, которая позволяет пользователю редактировать ввод через новое окно. PHP обработает вход, а затем добавит новый ввод с новыми значениями. По-видимому, когда я пытаюсь редактировать добавленный ввод, JavaScript просто не срабатывает. Пожалуйста, просветите меня, что я сделал не так. Это мой html-код:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.races').click(function(e){ console.log("Inside Testing"); e.preventDefault(); var currID = this.id; var content = '<form id="theForm" action="ct.php" method="post"> Race: <input type="text" id="race" name="race"><button type="submit" onClick="OKClicked()">Click this!</button></form>'; 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(); } </script> </head> <body> <div> Name: <input type="text" name="name"> </div> <div> <div> <input type="hidden" name="race-0" value="Human" id="race-0"> <span>race: Human</span> <a href="javascript:void(0)" class="races" id="race-0">Edit</a> </div> </div> <div> Name: <input type="text" name="name"> </div> <div> <div> <input type="hidden" name="race-1" value="God" id="race-1"> <span>race: God</span> <a href="javascript:void(0)" class="races" id="race-1">Edit</a> </div> </div> </body> </html> И это мой php-код:
<?php $postDataKey = array_keys($_POST); $text = ""; foreach ( $postDataKey as $currPostKey ) { $currValue = $_POST[$currPostKey]; $text .= '<div><input type="hidden" name="'.$currPostKey.'-1" value="'.$currValue.'" id="'.$currPostKey.'-1"><span>'.$currPostKey.': '.$currValue.'</span> <a href="javascript:void(0)" class="races" id="race-1">Edit</a></div>'; } echo ' <html> <head> <script> window.opener.setValue(\''.$text.'\'); </script> </head> </html> ' ; ?>
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 – это то, что вы ищете; щелкните ссылку и найдите делегированные события.
«Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже».