加載更多按鈕一次

Question

我有一個名為tbl_video的表，該表包含兩個字段（video_id，video_title）。我想使用像社交網站這樣的Ajax JQuery添加更多加載按鈕。我能夠獲得前兩個記錄，但是當我第二次嘗試時什么都沒發生。我沒有任何錯誤。我在做什么錯。

這是我的index.php文件，我在這里創建表結構，然后獲取兩條記錄。並獲取第二條記錄的ID值並將其發送到more.php文件

  <body>  

                    <table class="table table-bordered" id="load_data_table"> 

                    <thead>
                    <tr>
                    <td width="15%">Video Id</td>
                    <td>Video Title</td>
                    </tr>
                    </thead>
                    <?php

                    while ($row = mysqli_fetch_array($result)) {
                        $video_id = $row['video_id']; ?>
                             <tr>
                             <td><?php echo $row['video_id']; ?></td>
                             <td><?php echo $row['video_title']; ?></td>

                             </tr>
                        <?php
                    }

                    ?> 
                    <tr id="remove_row"><td><button type="button" id="more" class="btn btn-success form-control"
                     data-id="<?php echo $video_id; ?>">More</button></td></tr>

                    </table>  
               </div>  
          </div>  
     </body>  
</html>  
 <script>  
 $(document).ready(function(){  
     $('#more').click(function(){
 var id=$(this).data("id");


        $.ajax({
            url:"more.php",
            data:{id:id},
            method:"post",
            success:function(data){

              if(data!=''){

               $('#load_data_table').append(data);
               $('#remove_row').remove();


              }
              else{
                $('#more').html("No Data");
              }
            }

這是more.php文件。我認為這是自我解釋

$id = $_POST['id'];
$output = '';
$db = mysqli_connect('localhost', 'root', '', 'testing');
$data = mysqli_query($db, "select * from tbl_video where video_id >{$id} limit 2");
if (mysqli_num_rows($data)) {
    while ($row = mysqli_fetch_array($data)) {
        $output .= '

         <tbody>
         <tr>
          <td>'.$row['video_id'].'</td>
          <td>'.$row['video_title'].'</td>
         </tr>

         ';
    }
    $output .= '
  <tr id="remove_row"><td><button type="button" id="more" class="btn btn-success form-control"
  data-id="'.$row['video_id'].'">More</button></td></tr></tbody>

  ';
    echo $output;
}

任何幫助都會得到應用。

Answer 1

當您添加新行時，有一個用於“更多”的新按鈕

它具有與原始按鈕相同的ID，因此存在沖突

也需要將javascript初始化為這樣

PHP：

   $output .= '<tr id="remove_row"><td><button type="button"  class="more btn btn-success form-control" data-id="'.$row['video_id'].'">More</button></td></tr></tbody>';

使用Javascript：

<script>  
function moreButton() {
$('.more').click(function(){
var id=$(this).data("id");


$.ajax({
    url:"more.php",
    data:{id:id},
    method:"post",
    success:function(data){

      if(data!=''){

       $('#load_data_table').append(data);
       $('#remove_row').remove();

         moreButton();
      }
      else{
        $('.more:last').html("No Data");
      }
    }
 });
 }
 $(document).ready(function(){  

   moreButton();
 });

不要忘記使用.more刪除類的more按鈕的ID。