需要帮助以正确的方式编写代码来创建“loadmore”按钮和“喜欢”按钮的帖子

Question

I create a load more button for load more posts from the database but when I add like button for that if one time clicks on load more button and then click on the like button, like.php file runs two times and adds two lines in likes table. if I click 2 times on load more then like.php file runs 3 times and... I want to know how I should create a loadmore button and like the button to works fine.

this is simple of my codes:

posts.php :

<div id="comnts2"></div>
<button id="btn2" >load more</button><script>

$(document).ready(function() {

  var comco2 = 2;
  var offset2 = 0;
  $("#btn2").click(function() {
    $.ajax({
        method: "POST",
       url: "ld_comco.php",
        data: { comnco2 : comco2, offset2 : offset2}
      })
      .done(function(msg2) {

          $("#btn2").hide();
        } else {
       $("#comnts2").append(msg2);

      });

    offset2 = offset2 + comco2;
  });
  $("#btn2").trigger("click");
});
</script>

ld_comco.php:

<?php
$comnco2=$_POST['comnco2'];
$offset2=$_POST['offset2'];

$rzp=mysqli_query($conn,"SELECT * FROM `tbl_users_posts` WHERE uid = '$uid' ORDER BY id DESC limit $offset2, $comnco2");

  while($rp=mysqli_fetch_assoc($rzp)){
    $sid=$rz['id'];
    $lik=$rz['lik'];
    echo $sid."<br>";

    /*like*/
    echo'<img class="li_ik1" data-id="'.$sid.'" src="pc3/up.png">'.$lik.' Likes</img>';
?>
    </span>
<?php }?>

<script type="text/javascript">

$(document).ready(function() {
  var uid=<?php echo $uid;?>;

  $(document).on("click", ".li_ik1", function() {
    var psid = $(this).data('id');
      $.ajax({
          method: "POST",
          url: "like.php",
          data: {psid: psid, uid: uid}
        }).done();
  }); 
});
</script>

like.php:

<?php
$id=$_POST['psid'];
$uid=$_POST['uid'];

$Y=mysqli_query($conn,"INSERT INTO `t_plik` (pid,uid) VALUES ('$id','$uid')");
$Q=mysqli_query($conn,"UPDATE `tbl_users_posts` SET lik=lik+1 WHERE id='$id'");
?>

thanks

Answer 1

I think the problem is, that you bind your like button multiple times globally. Each time you load the content from ld_comco.php you also call $(document).on("click", ".li_ik1", ...) in the $(document).ready block, which means you bind all ".li_ik1" buttons on the entire document (but some of them has already been bind).

I would remove the $(document).ready(...) block from the ld_comco.php and move the logic into the posts.php right before you render your content. A further positive aspect is you have your business logic at one place.

KEEP IN MIND: You get a response of buttons in msg2, thats why you do not need to filter $msg2 anymore. But if you wrap your buttons with further html tags in ld_comco.php, your buttons will be on a deeper level, so you need to use a selector again, like you did with .on("click", ".li_ik1", ...).

posts.php

...
var $msg2 = $(msg2);

// Now you bind only the loaded buttons instead of 
// the buttons in the entire document for multiple times
$msg2.on("click", function() {
  var $element = $(this);
  var psid = $element.data('id');
  var uid = $element.data('uid');

  $.ajax({
    method: "POST",
    url: "like.php",
    data: {psid: psid, uid: uid}
  }).done();
});

$("#comnts2").append($msg2);
...

In your ld_comco.php you need to add the data-uid="'.$uid.'" and remove the script block. Then your file should look like this:

<?php
$comnco2=$_POST['comnco2'];
$offset2=$_POST['offset2'];

$rzp=mysqli_query($conn,"SELECT * FROM `tbl_users_posts` WHERE uid = '$uid' ORDER BY id DESC limit $offset2, $comnco2");

while($rp=mysqli_fetch_assoc($rzp)){
  $sid=$rz['id'];
  $lik=$rz['lik'];
  echo $sid."<br>";

  /*like*/
  echo'<img class="li_ik1" data-id="'.$sid.'" data-uid="'.$uid.'" src="pc3/up.png">'.$lik.' Likes</img>';
}
?>