Question

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

Answer 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()方法。

Answer 2

这是在带有live函数的旧版jQuery中解决的，与bind函数相反。

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

在当前版本的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)）并且你是金色的。

Answer 3

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

＆＃34;委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。＆＃34;

附加后JavaScript不会触发

3 个答案: