Ajax 没有在由 ajax 填充的 div 中触发

Question

我有一个通过 ajax 请求填充的 div。 在 div 中是一个表单，完成后应该使用相同类型的 ajax 请求来填充另一个 div。我使用相同的方法来创建两者，但第二个 javascript 没有运行：

第一个（有效）：

<div class="content_text" id="searchbysurname">
          <p><form name="searchbysurname">  
            <b>Search by Surname: </b><input class="inline" type="text" name="q">
            <input type="submit"></form>
             <script>
     $('#searchbysurname form').submit(function(){
          var data=$(this).serialize();
          // post data
          $.post('searchbysurname_test.php', data , function(returnData){
                      $('#resultstable').html( returnData)
          })

          return false; // stops browser from doing default submit process
    });
      </script>
            <div id="resultstable"></div>

第二个（在结果表 div 中）不起作用：

<? require_once("dbcontroller.php");
$db_handle = new DBController(); 

$q = ($_POST['q']);
$employees=array();
$sql = "SELECT employees.employeeid, employees.firstname, employees.surname FROM employees  where UCASE(employees.surname) LIKE UCASE('%".$q."%')";
$employees = $db_handle->runQuery($sql); ?>
<table class="invisible">
<?
          if(isset($employees) && !empty($employees)){
          foreach($employees as $k=>$v) {
         ?>
    <tr><td><?php echo $employees[$k]["firstname"]; ?>  <?php echo $employees[$k]["surname"]; ?> </td>
    <td><div id="viewemployeedetails<? echo $employees[$k]["employeeid"]?>">
        <form>
            <input type="hidden" name="id" value="<? echo $employees[$k]["employeeid"]?>">
            <input type="submit" value="View">
        </form>
     </div></td>

      <div id="mainpart"><b></b></div>
            <script>
     $('viewemployeedetails<? echo $employees[$k]["employeeid"]?> form').submit(function(){
          var data=$(this).serialize();
          // post data
          $.post('viewemployeedetails.php', data , function(returnData){
                      $('#mainpart').html( returnData)
          })

          return false; // stops browser from doing default submit process
    });
      </script> 

Answer 1

我知道这与您的问题无关，但您不应该使用 PHP 短标签表示法，它已被弃用：https://softwareengineering.stackexchange.com/questions/151661/is-it-bad-practice-to-use-tag-in-php

您的第一个代码块是带有内联 Javascript 的 HTML，这是一种糟糕的处理方式，如果您坚持以这种方式使用 Javascript，您将很难调试错误。您应该将 Javascript 放在与 HTML 不同的文件中，并将其包含在最终正文标记之前。理想情况下，您应该使用 window.onload（或其他类似方法，如闭包或 jQuery 的 .ready() 方法）来确保仅在 DOM 完全加载后才解析脚本的 DOM 遍历元素。

您的第二个 Javascript 代码块永远不会运行，因为在浏览器解析 HTML 时它并不存在。它只是稍后注入，但 Javascript 不能那样工作。你可以动态地注入javascript，但不是那样的。你必须这样做：

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);

我从这里获取了这段代码：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS