IT技术 - 附加后 JavaScript 不会触发 - 吾爱随笔录

附加后 JavaScript 不会触发

IT技术 javascript php jquery html

2021-02-05 00:16:47

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

3个回答

jQuery 只知道它运行时页面中的元素，因此添加到 DOM 的新元素不会被 jQuery 识别。为了解决这个问题，使用事件委托，将事件从新添加的项目冒泡到 DOM 中当 jQuery 在页面加载时运行时的某个点。许多人将其document用作捕获冒泡事件的地方，但没有必要在 DOM 树上爬那么高。理想情况下，您应该委托给页面加载时存在的最近的父级。

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

这是在旧版本的 jQuery 中使用live函数解决的，而不是bind函数。

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

jQuery的的当前版本，bind并live已取代on。的默认行为on()就像bind。幸运的是，有一种方法可以使用on，使其像live.

我写了一篇关于它的文章，它可以帮助你理解如何。

把它们加起来...

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

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

因此，只需搜索所有可能元素可能具有的公共父元素（$(document)如果您不想太认真，可以使用），您就是金子。

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

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

其它你可能感兴趣的问题

上一篇意外的 javascript 日期行为下一篇JavaScript 中的关闭 - 有什么问题？

附加 后 JavaScript 不会触发

附加后 JavaScript 不会触发