Слушатель событий не активен после обновления таблицы - PullRequest
Новая
       10

Слушатель событий не активен после обновления таблицы

1 голос
/ 06 апреля 2020

У меня есть прослушиватель событий в таблице, чтобы указать текущий идентификатор строки при нажатии. Он отлично работает при первом щелчке строки, но когда ajax запускается после изменения выпадающего списка и обновляется таблица, прослушиватель событий больше не работает. Почему?

исходный файл: 

<?php   
 //load_data_select.php  
 $connect = mysqli_connect("localhost", "re", "", "test");  
 function fill_brand($connect)  
 {  
      $output = '';  
      $sql = "SELECT * FROM brand";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<option value="'.$row["brand_id"].'">'.$row["brand_name"].'</option>';  
      }  
      return $output;  
 }  
 function fill_product($connect)  
 {  
      $output = '<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<table id="mytable" name="table_1">
  <tr>
    <th>ID</th>
    <th>PRODUCT</th>
    <th>BRAND ID</th>
  </tr>';  
      $sql = "SELECT * FROM product";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<div class="col-md-3">';  
           $output .= '<tr>
    <td  id="'.$row["product_id"].'">'.$row["product_id"].'</td>
     <td  id="'.$row["product_id"].'">'.$row["product_name"].'</td>
      <td  id="'.$row["product_id"].'">'.$row["brand_id"].'</td>
   </tr>';  

      }  
      $output .= '</table>';
      return $output;  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>ok</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h3>  
                     <select name="brand" id="brand">  
                          <option value="">Show All Product</option>  
                          <?php echo fill_brand($connect); ?>  
                     </select>  
                     <br /><br />  
                     <div class="row" id="show_product">  
                          <?php echo fill_product($connect);?>  
                     </div>  
                </h3>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  

     var table = document.querySelector('#mytable');

// listen for a click
table.addEventListener('click', function (ev) {
    var serviceID = ev.target.id;
    alert(serviceID);
})


      $('#brand').change(function(){  
           var brand_id = $(this).val();  
           $.ajax({  
                url:"load_data.php",  
                method:"POST",  
                data:{brand_id:brand_id},  
                success:function(data){  
                     $('#show_product').html(data);  
                }  
           });  
      });  
 });  
 </script>

, а затем второй файл (load_data. php) для обновления sh таблицы: 

 <?php  
 //load_data.php  
 $connect = mysqli_connect("localhost", "re", "", "test");  
 $output = '';  
 if(isset($_POST["brand_id"]))  
 {  
      if($_POST["brand_id"] != '')  
      {  
           $sql = "SELECT * FROM product WHERE brand_id = '".$_POST["brand_id"]."'";  
      }  
      else  
      {  
           $sql = "SELECT * FROM product";  
      }  
      $result = mysqli_query($connect, $sql);  
      $output .= ' <style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>



<table id="mytable">
  <tr>
    <th>ID</th>
    <th>PRODUCT</th>
    <th>BRAND ID</th>
  </tr>';
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= ' <tr>
    <td id="'.$row["product_id"].'">'.$row["product_id"].'</td>
     <td id="'.$row["product_id"].'">'.$row["product_name"].'</td>
      <td id="'.$row["product_id"].'">'.$row["brand_id"].'</td>
   </tr>'; }  

       $output .= '</table>';
      echo $output;  
 }  
 ?>
...