附加 [重复] 后 JavaScript 不会触发答案

【问题标题】：JavaScript does not fire after appending [duplicate]附加 [重复] 后 JavaScript 不会触发
【发布时间】：2015-02-14 03:36:06
【问题描述】：

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

【问题讨论】：

如果在DOM中添加新代码，需要使用.on

标签： javascript php jquery html

【解决方案1】：

jQuery 仅在页面运行时才知道页面中的元素，因此添加到 DOM 的新元素无法被 jQuery 识别。为了解决这个问题，使用event delegation，从新添加的项目中冒泡事件直到 jQuery 在页面加载时运行时所在的 DOM 中的某个点。许多人使用document 作为捕捉冒泡事件的地方，但没有必要在 DOM 树上爬那么高。理想情况下you should delegate to the nearest parent that exists at the time of page load.

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

【讨论】：

【解决方案2】：

在旧版本的 jQuery 中使用 live 函数解决了这个问题，与 bind 函数相反。

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

在当前版本的 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)），您就可以了。

【讨论】：

【解决方案3】：

jQuery on Method 是您正在寻找的；单击链接并查找委托事件。

“委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。”

【讨论】：