Question

我被困在代码中，需要您的快速响应才能完成我的项目。我能够从数据库中提取所有数据，但是当我单击查看按钮时，详细信息不会以模式形式弹出。该按钮不起作用。当我从while循环中删除点击功能按钮时，它开始工作。但是我想在每一行中查看按钮，以便我可以使用模式显示详细信息。有人可以帮忙解决此问题吗？

$(document).ready(function(){
 load_data();
 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
 });

$('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });

PHP：

<?php
    //fetch.php
    $connect = mysqli_connect("localhost", "root", "", "crud");
    $output = '';
    if(isset($_POST["query"]))
    {
     $search = mysqli_real_escape_string($connect, $_POST["query"]);
     $query = "
      SELECT * FROM records
      WHERE User_ID LIKE '%".$search."%'
      OR User_Name LIKE '%".$search."%' 
      OR User_Email '%".$search."%' 
      OR User_Age LIKE '%".$search."%' 
      
     ";
    }
    else
    {
     $query = "
      SELECT * FROM records ORDER BY User_ID
     ";
    }
    $result = mysqli_query($connect, $query);
    if(mysqli_num_rows($result) > 0)
    {
     $output .= '
      <div class="table-responsive">
       <table class="table table bordered">
        <tr>
         <th>User ID</th>
         <th>User Name</th>
         <th>User Email</th>
         <th>User Age</th>
         <th>View</th>
        </tr>
     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '
       <tr>
        <td>'.$row["User_ID"].'</td>
        <td>'.$row["User_Name"].'</td>
        <td>'.$row["User_Email"].'</td>
        <td>'.$row["User_Age"].'</td>
        <td><input type="button" name="view" value="view" id="'.$row["User_ID"].'" class="btn btn-info btn-xs view_data" /></td>
       </tr>
      ';
     }
     echo $output;
    }
    else
    {
     echo 'Data Not Found';
    }
    
    ?>

<?php  
     if(isset($_POST["employee_id"]))  
     {  
          $output = '';  
          $connect = mysqli_connect("localhost", "root", "", "crud");  
          $query = "SELECT * FROM records WHERE User_ID = '".$_POST["employee_id"]."'";  
          $result = mysqli_query($connect, $query);  
          $output .= '  
          <div class="table-responsive">  
               <table class="table table-bordered">';  
          while($row = mysqli_fetch_array($result))  
          {  
               $output .= '  
                    <tr>  
                         <td width="30%"><label>Name</label></td>  
                         <td width="70%">'.$row["User_ID"].'</td>  
                    </tr>  
                    <tr>  
                         <td width="30%"><label>Address</label></td>  
                         <td width="70%">'.$row["User_Name"].'</td>  
                    </tr>  
                    <tr>  
                         <td width="30%"><label>Gender</label></td>  
                         <td width="70%">'.$row["User_Email"].'</td>  
                    </tr>  
                    <tr>  
                         <td width="30%"><label>Designation</label></td>  
                         <td width="70%">'.$row["User_Age"].'</td>  
                    </tr>  
                     
                    ';  
          }  
          $output .= "</table></div>";  
          echo $output;  
     }  
     ?>

Answer 1

您可以尝试更改此行：

$('body').on('click', '.view_data', function(){
/* old:
$('.view_data').click(function(){ */

它起作用了吗？

想法是，在您的版本中，代码由于以下两个原因而无法工作：

当您使用新的.view_data元素更新DOM时，只有初始元素具有此功能（您必须调用新元素的功能...）
当DOM中没有.view_data元素时，您的函数会立即运行，然后加载文档-因此，当它们异步出现时，它没有任何作用

建议的替代方法是将点击事件绑定到body，然后按.view_data对其进行过滤。因此，无论DOM中发生什么变化，事件始终会被触发并且该功能可以正常工作。

使用ajax和php搜索和查看详细信息

1 个答案: