JavaScript在追加后不会激发_Javascript_Php_Jquery_Html

JavaScript在追加后不会激发

javascript php jquery html

JavaScript在追加后不会激发,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我正在尝试创建一个表单，允许用户通过新窗口编辑输入。PHP将处理输入，然后用新值附加新输入。显然，当我试图编辑附加的输入时，JavaScript不会启动。请告诉我我做错了什么。这是我的html代码： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script&g

我正在尝试创建一个表单，允许用户通过新窗口编辑输入。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>


$（文档）.ready（函数（）{
$（'.races'）。单击（函数（e）{
控制台日志（“内部测试”）；
e、 预防默认值（）；
var currID=this.id；
var content='Race:单击此！'；
childWin=window.open（“”，“\u blank”，“高度=400，宽度=550，状态=yes，工具栏=no，菜单栏=no，位置=no，地址栏=no”）；
tobeaded=$（this.nexist（'div'）；
childWin.document.close（）；
childWin.document.write（内容）；
popupRace=childWin.document.getElementById（“种族”）；
parentRace=document.getElementById（currID）；
transferValues（）；
})
});
函数transferValues（）
{
popurpace.value=parentRace.value；
}
函数设置值（文本）
{
childWin.close（）；
tobeaded.parent（）.append（文本）；
tobedded.remove（）；
}
姓名：
种族：人类
姓名：
种族：上帝

这是我的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在运行时只知道页面中的元素，因此jQuery无法识别添加到DOM中的新元素。为了防止这种使用，将事件从新添加的项冒泡到DOM中的某个点，当jQuery在页面加载上运行时，该点就在DOM中。许多人使用

document

作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。理想的

您可能希望更改事件处理程序，以便它们使用该方法。

jQuery是您要寻找的；单击链接并查找委派的事件

“委派事件的优点是，它们可以处理来自后代元素的事件，这些元素将在以后添加到文档中。”

这一问题在较旧版本的jQuery中通过

live

功能解决，而不是

bind

功能

```
bind
```
函数将事件附加到所有匹配元素，只要它们在执行时存在。之后附加的任何元素都将被排除
```
live
```
函数会将事件附加到任何匹配的元素上，即使该元素是在执行指令后创建的

在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(){...});

因此，只需搜索所有可能元素都可能具有的公共父元素（如果您不想想想太多，可以使用$（文档）
），您就是金色的。
如果您在DOM中添加新代码，您需要使用.on