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

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

<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> 
    ' 
    ; 
?>

источник

2014-12-15 Lisa

Если вы добавите новый код в DOM, вам нужно использовать '.on' –

JQuery знает только из элементов страницы, в то время, что он работает, так что новые элементы добавлены в DOM не распознаются jQuery. Для борьбы с этим используйте event delegation, пузырящиеся события из недавно добавленных элементов до точки в DOM, которая была там, когда jQuery выполнялся при загрузке страницы. Многие люди используют document как место, где можно поймать пузырьковое событие, но не обязательно идти так высоко в дерево DOM. В идеале you should delegate to the nearest parent that exists at the time of page load.

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

источник

2014-12-15 22:22:00

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

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

источник

2014-12-15 22:24:37 ajacian81

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

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

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

Я написал an article about it, что может помочь вам понять, как это сделать.

Подводя итог ...

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

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

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

источник

2014-12-15 22:27:10

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

ответ

Смежные вопросы