jquery loadmoreが動作しない

Question

私はjquery AJAXを使用してMySQLデータベースからさらに多くの投稿を読み込みました。それは正しいコンテンツをもたらし、うまく動作します。

唯一の問題は、毎回最初の2枚の写真の後にデータを表示することです。 合計10枚の写真があり、最初の2枚がすでに表示されているとします。

画像1 画像2

負荷よりボタンが、ここでクリックされると、それは今、私は再び負荷に多くのボタンを押すと 画像1 画像2 画像3 画像4

をどのように見えるかであります、ここでは、コンテンツを表示する方法である

画像1 画像2画像5 画像6画像3 画像4

私は再びそれを押すと、それは1と2の後に7と8を貼り付けますので、ここで

に私のHTML

  $rowperpage = 2; 
      $select_count=mysqli_query($con,"SELECT count(*) as allcount from gif where status = 1"); 
      $select_data=mysqli_fetch_array($select_count); 
      $allcount=$select_data['allcount']; 
      $run=mysqli_query($con,"SELECT * FROM gif WHERE status=1 order by id desc limit ".$rowperpage); 
      if(!$run){ 
      echo mysqli_error($con); 
      } 
      while ($row=mysqli_fetch_array($run)) { 
       $image=$row['gif']; 
       $id=$row['id']; 
       $title=$row['title']; 
       ?> 
       <div class = "load-more-post"> 
       <div class="col-md-3 col-sm-4 col-xs-12" style="margin-bottom:10px;"> 
        <div classs="panel panel-info"> 
         <div classs="panel panel-body "> 

          <a href='blog.php?gifId=<?php echo $id; ?>'><img src="Uploads/<?php echo $image; ?> " class="img img-responsive img-thumbnail" style='height: 260px; width: 250px; '></a> 

         </div> 
        </div> 
       </div> 
       </div> 

      <?php }?> 
<h1 class="load-more">Load More</h1> 
<input type="hidden" id="row" value="<?php echo $id; ?>"> 
<input type="hidden" id="all" value="<?php echo $allcount; ?>"> 

はここに私のJavascript

$(document).ready(function(){ 

// Load more data 
$('.load-more').click(function(){ 
    var row = Number($('#row').val()); 
    var allcount = Number($('#all').val()); 
    //row = row + 2; 

    if(row != 4){ 
     $("#row").val(row); 


     $.ajax({ 
      url: 'getData.php', 
      type: 'post', 
      data: {row:row}, 
      beforeSend:function(){ 
       $(".load-more").text("Loading..."); 
      }, 
      success: function(response){ 

       // Setting little delay while displaying new content 
       setTimeout(function() { 
        // appending posts after last post with class="post" 
        $(".load-more-post").after(response); 
        //var rowno = row + 2; 
        var thenewid = Number($('#newid').val()); 
        alert(thenewid); 
        $("#row").val(thenewid); 
        // checking row value is greater than allcount or not 
        if(thenewid == 4){ 


         // Change the text and background 
         $('.load-more').text("No more posts"); 
         $('.load-more').addClass('inactiveLink'); 

        } 
        else{ 
         $(".load-more").text("Load more"); 
        } 
       }, 2000); 


      } 
     }); 
    } 


}); 

}); 

です

ここに私のデータを取得するPHPファイルがあります。 getData.php

あなたが .load-more-post divの後に新しい投稿を挿入する

$(".load-more-post").after(response); 

を使用

$row = $_POST['row']; 
$rowperpage = 2; 

// selecting posts 
$run=mysqli_query($con,"SELECT * FROM gif WHERE status=1 and id < $row order by id desc limit ".$rowperpage); 
      if(!$run){ 
      echo mysqli_error($con); 
      } 



while($row = mysqli_fetch_array($run)){ 
$image=$row['gif']; 
       $id=$row['id']; 
       $title=$row['title']; 
       ?> 
       <div class="col-md-3 col-sm-4 col-xs-12" style="margin-bottom:10px;"> 
        <div classs="panel panel-info"> 
         <div classs="panel panel-body" > 

          <a href='blog.php?gifId=<?php echo $id; ?>'><img src="Uploads/<?php echo $image; ?> " class="img img-responsive img-thumbnail" style='height: 260px; width: 250px; '></a> 

         </div> 
        </div> 
       </div> 

      <?php  
     }?> 

     <input type="hidden" id="newid" value="<?php echo $id; ?>"> 

Answer 1

。この特定のdivはあなたの最初の投稿に囲まれているので、そこに追加される理由を説明します。実際にDOMに新しいコンテンツを挿入ラインである

$(".load-more").before(response);