mysql - Actions links not working while fetching data from database using ajax in php

Screenshot for incorrect output is attached. Actions links are not working.]2I am using ajax to fetch data from mysql database in php and populating the table with returned data. HTML table is being populated with data but action links ( edit,view and delete) are not working.

index.php

<div id="employee_table">  
                          <table class="table table-bordered text-center">  
                            <thead class="bg-dark text-center text-white">
                               <tr>  
                                    <th>Employee Name</th> 
                                    <th>Address</th>         
                                    <th>Gender</th> 
                                    <th>Designation</th>         
                                    <th>Age</th>         
                                    <th>Photo</th>                                                  
                                    <th>Edit</th>  
                                    <th>View</th>  
                                    <th>Delete</th>  
                               </tr>
                            </thead>
                            <tbody id="tableBody">                          
                               <?php  
                               
                               $query = "SELECT * FROM tbl_employee ORDER BY name";  
                               $result = mysqli_query($connect, $query);
                               while($row = mysqli_fetch_array($result))  
                               {  
                               ?>  
                               <tr>  
                                    <td><?php echo $row["name"]; ?></td>  
                                    <td><?php echo $row["address"]; ?></td>  
                                    <td><?php echo $row["gender"]; ?></td>  
                                    <td><?php echo $row["designation"]; ?></td>  
                                    <td><?php echo $row["age"]; ?></td>
                                    <td><img src='<?php echo $row["image"]; ?>' width=80 height=30/></td>    
                                    <td><a  id="<?php echo $row["id"]; ?>" class="btn btn-warning btn-sm edit_data"/><i class="fa fa-pencil-square" aria-hidden="true"></i></a></td>  
                                    <td><a  id="<?php echo $row["id"]; ?>" class="btn btn-info btn-sm view_data"/><i class="fa fa-eye" aria-hidden="true"></i></a></td>  
                                    <td><a  id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-sm  del_data"/><i class='fa fa-trash' aria-hidden='true'></i></a></td>  
                               </tr>  
                               <?php  
                               }  
                               ?>
                           <tbody>                             
                          </table>  
                     </div>  

At this point of time, Edit,View and Delete links are working. but when inserting,updating or deleting data, then returned links are not working.

scripts.js

function showUsers(){
           //alert("hello");
         $.ajax({  
                     url:"fetchusers.php",  
                     method:"GET",
                     dataType:"json",  
                     success:function(data){                         
                          $('#tableBody').html(data); 
                     }  
                });  
          }

fetchusers.php

<?php  
 
  require 'db.php';
  $output="";  
  $query = "SELECT * FROM tbl_employee order by name";  
      $result = mysqli_query($connect, $query);  
      //$row = mysqli_fetch_array($result);         
    while($row=mysqli_fetch_array($result)){
      $output .=
                "<tr><td>".
                     $row['name'].
                     "</td> <td>".
                     $row['address'].
                     "</td><td>".
                     $row['gender'].
                     "</td><td>".
                     $row['designation'].
                     "</td><td>".
                     $row['age'].
                     "</td><td><img src=".
                     $row['image'].
                     " width=80 height=30/></td><td><a  id=".
                     $row['id'].
                     "class='btn btn-warning btn-sm edit_data'><i class='fa fa-pencil-square' aria-hidden='true'></i></a></td><td><a  id=".
                     $row['id'].
                     "class='btn btn-info btn-sm view_data'><i class='fa fa-eye' aria-hidden='true'></i></a></td><td><a  id=".
                     $row['id'].
                     "class='btn btn-danger btn-sm del_data'><i class='fa fa-trash' aria-hidden='true'></i></a></td></tr>";
                     
        
    }
    if($output){    
       echo json_encode($output);
    }
    else{
         echo "No data found.";
    }
    
 ?>

At this point of time, Edit,View and Delete links are not working. No event is happening. data is being populated in html table.

Solution:

$output is not correctly formatted, Please update it to the following.

$output .=
  "<tr>".
  "<td>".$row['name']."</td>".
  "<td>".$row['address']."</td>".
  "<td>".$row['gender']."</td>".
  "<td>".$row['designation']."</td>".
  "<td>".$row['age']."</td>".
  "<td><img src='".$row['image']."' width=80 height=30/></td>".
  "<td><a id='".$row['id']."' class='btn btn-warning btn-sm edit_data'><i class='fa fa-pencil-square' aria-hidden='true'></i></a></td>".
  "<td><a id='".$row['id']."' class='btn btn-info btn-sm view_data'><i class='fa fa-eye' aria-hidden='true'></i></a></td>".
  "<td><a id='".$row['id']."' class='btn btn-danger btn-sm del_data'><i class='fa fa-trash' aria-hidden='true'></i></a></td>".
  "</tr>";

Solution:

Instead of

echo json_encode($output);

replace with

echo $output;

Your $output variable is not an array but a string contains a html