How do I run a click event for a php created html table

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);
?>

Shaun Hare · Accepted Answer · 2017-02-19 20:49:51Z

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){

answered Feb 19, 2017 at 20:49

Shaun Hare

3,8712 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I run a click event for a php created html table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related