Question

我创建了一个“加载更多”按钮，用于从数据库加载更多帖子，但是如果为此添加“喜欢”按钮，如果一次单击“加载更多”按钮，然后单击“喜欢”按钮，则like.php文件将运行两次在Likes表中添加两行。如果我点击2次加载更多，那么like.php文件将运行3次并... 我想知道如何创建一个loadmore按钮，并使该按钮正常工作。

这是我的简单代码：

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'");
?>

谢谢

Answer 1

$("#btn2").trigger("click"); posts.php中的这个意味着点击#btn2 所以点击它之后，您再次点击它

$(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>

Answer 2

我认为问题是，您在全局范围内多次绑定了“喜欢”按钮。每次从ld_comco.php加载内容时，您还会在$(document).on("click", ".li_ik1", ...)块中调用$(document).ready，这意味着您将整个“ .li_ik1”按钮绑定到整个文档上（但是其中一些已经被绑定）。

在呈现内容之前，我将从$(document).ready(...)中删除ld_comco.php块并将逻辑移到posts.php中。另一个积极的方面是您将业务逻辑放在一个地方。

保持头脑：您在msg2中得到按钮的响应，这就是为什么您不再需要过滤$msg2的原因。但是，如果您在ld_comco.php中用更多的html标签包装按钮，则按钮将处于更深的层次，因此您需要像使用.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);
...

在您的ld_comco.php中，您需要添加data-uid="'.$uid.'"并删除script块。然后您的文件应如下所示：

<?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>';
}
?>

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

2 个答案: