jQuery-从数据库中循环时，循环按钮不起作用

Question

最初，我从数据库中删除了10条评论。然后，使用ShowMore按钮，我每次点击时都会循环4个评论。但是，从第14条评论中，循环按钮，同意这不起作用(有点像投票按钮(

Ideas.php

<?php
$postshow = "SELECT * FROM ideas_1 ORDER BY consents DESC LIMIT 10";
$done = mysqli_query($conn, $postshow);
?>
<div class = 'comments'>
    <?php
while ($show = mysqli_fetch_assoc($done)) {
    $postid = $show['postid'];
    $userid = $show['userid'];
    $consents = $show['consents'];?>
    <?php echo$show['post'];?><br>
   <span class = 'counter'><?php echo$show['consents'];?></span> <span>Consents</span>
     <?php $asd = "SELECT * FROM consents WHERE dept = 'ideas' and task = '1' and postid = '$postid' and voterid = '$id'";
      $doit = mysqli_query($conn, $asd);
      $exist = mysqli_num_rows($doit);
      if ($exist == 0){ ?>
    <button class = 'consents' data-postid = '<?php echo$postid;?>' data-posterid ='<?php echo$userid;?>'
    data-voterid = '<?php echo$id;?>' data-consents = '<?php echo$consents;?>' >Consent This</button>
     <?php } ?>


<?php }
?>
</div>
<?php
     $more = "SELECT * FROM ideas_1";
     $more1 = mysqli_query($conn, $more);
     if (mysqli_num_rows($more1)>10) {
     ?>
     <button id = 'showmore'>Show more</button>
     <?php }?>
<script>

    var voterid = "<?php echo $id;?>"
    var commentCount = 10;
$(document).ready(function () {
   $('.consents').click(function(){
    var postid = $(this).data('postid');
    var consents = $(this).data('consents');
    var posterid = $(this).data('posterid');
    $(this).hide();
    $.post ("consentsideas.php", {
        dept: "ideas",
        task: "1",
        postid: postid,
        voterid: voterid,
        consents: consents,
        posterid: posterid
    });
    $(".counter").html(++consents);
   });
  $(".post_answer").click(function(){
    var answer = $(".answer").val();
    $.post ("answerideas.php", {
        answer: answer,
        id: voterid
            });
    $(".answer").val('');
    });
  $("#showmore").click(function(){
    commentCount = commentCount + 4;
    $('.comments').load("load-ideas.php", {
        commentNewCount: commentCount
        });
    });
}
  ); 
</script>

load-Ideas.php

<?php
include ('header.php');
if (isset($_SESSION['id'])){
    $id = $_SESSION['id'];
} else {
    header("Location: index.php");
}
include('dbh.php');
$commentNewCount = $_POST['commentNewCount'];
$postshow = "SELECT * FROM ideas_1 ORDER BY consents DESC LIMIT $commentNewCount";
$done = mysqli_query($conn, $postshow);

while ($show = mysqli_fetch_assoc($done)) {
    $postid = $show['postid'];
    $userid = $show['userid'];
    $consents = $show['consents'];?>
   <div class = 'comments'>
    <?php echo$show['post'];?><br>
   <span class = 'counter'><?php echo$show['consents'];?></span> <span>Consents</span>
     <?php $asd = "SELECT * FROM consents WHERE dept = 'ideas' and task = '1' and postid = '$postid' and voterid = '$id'";
      $doit = mysqli_query($conn, $asd);
      $exist = mysqli_num_rows($doit);
      if ($exist == 0){ ?>
    <button class = 'consents' data-postid = '<?php echo$postid;?>' data-posterid ='<?php echo$userid;?>'
    data-voterid = '<?php echo$id;?>' data-consents = '<?php echo$consents;?>'>Consent This</button>
     <?php } ?>
   </div>

<?php }
?>

<script>
    $(document).ready(function(){ 
         $('.consents').click(function(){
    var postid = $(this).data('postid');
    var consents = $(this).data('consents');
    var posterid = $(this).data('posterid');
    $(this).hide();
    $.post ("consentsideas.php", {
        dept: "ideas",
        task: "1",
        postid: postid,
        voterid: voterid,
        consents: consents,
        posterid: posterid
    });
    $(".counter").html(++consents);
   });
});
</script>

我在做什么错？

Answer 1

由于您填充文档动态带有更多.consents按钮 - 您需要通过使用委派事件的jQuery .on((方法将单击动态委派给这些元素

$(staticParent).on(eventName, dynamicChild, callbackFn)

或您的情况：

$(document /*or rather a static parent selector*/ ).on("click", ".consents", function) {

对于动态生成的任何其他元素也是如此。

也不使用fetch_assoc，而是使用PDO使用准备的语句
此外，不要使用filter_input，filter_var等过滤卫生过滤的情况不信任输入值