如何为php创建的html表运行click事件

Question

I have php creating a table based on the results of a search and this table overwrites a previous table. When clicking a row of this table I want the details of the row to be displayed. However while clicking on the previous table works when clicking on the results table the click event is not triggered.

The initial table code and containing div:

<div id="fixInfo" style="overflow-y: auto; overflow-x:hidden;max-height:350px; width: 1000px;">
  <table class="standard" id= "list">
  <?php
    include 'DATA.php';
    $sql = "SELECT * FROM FIX";
    $result = mysqli_query($conn, $sql);
    if ($result = mysqli_query($conn, $sql)){  
      while ($row = mysqli_fetch_assoc($result)){ 
        echo '<tr>';
        echo '<td style="width:150px;">'.$row["FIX_ID"].'</td>'; 
        echo '<td style="width:150px;">'.$row["TIME"].'</td>'; 
        echo '<td style="width:150px;">'.$row["DATE"].'</td>'; 
        echo '<td style="width:150px;">'.$row["PROVIDER_ID"].'</td>'; 
        echo '</tr>';
      } 
    }
    mysqli_close($conn);
  ?>
  </table>
</div>

The jquery click event code:

<script>
  $("#list tr").on("click",function(){
    var ID = $(this).find("td:first").text();
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } 
    xmlhttp.onreadystatechange = function(){ 
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("fixstuff").innerHTML = this.responseText;
      }
    };
    var params= "ID="+ID;
    xmlhttp.open("POST","fixdetails.php",true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
    });
</script>

The result table creation code(searchFix.php):

<?php
  $sort = $_POST['sort'];
  $search= $_POST['search'];
  include 'DATA.php';

  if($search==""){
    $sql = "SELECT * FROM FIX";
  }
  else{
    $sql= "SELECT * FROM FIX WHERE ".$sort." =". $search;
  }

  $result = mysqli_query($conn, $sql);
  if ($result = mysqli_query($conn, $sql)){ 
    while ($row = mysqli_fetch_assoc($result)){
      echo '<tr>';
      echo '<td style="width:150px;">'.$row["FIX_ID"].'</td>';
      echo '<td style="width:150px;">'.$row["TIME"].'</td>';
      echo '<td style="width:150px;">'.$row["DATE"].'</td>';
      echo '<td style="width:150px;">'.$row["PROVIDER_ID"].'</td>';
      echo '</tr>';
    }   
  }
  mysqli_close($conn);
?>

Answer 1

As you are altering the dom you will need to do a rebind. $.on does not work the same as the deprecated $.live

try changing initial line to

$(document).on('click','#list tr', {} ,function(e){