按下按钮时增加计数（ajax变量）4，将其传递给php脚本

Question

我每次按下按钮时都试图将AJAX中的变量设置为+4。它只更新一次。想知道我怎么能让它继续工作。

index.php - AJAX

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var logCount = 4;
    $("#showMore").click(function(){
      logCount = logCount + 4;
      $("#showAuditLogs").load("inc/loadLogs.php", {
        logCount: logCount
      });
    });
  });
</script>

index.php - HTML和PHP代码

<div id="showAuditLogs">
          <?php

            $logs = DB::query('SELECT * FROM auditlog ORDER BY id DESC LIMIT 4');
            foreach($logs as $l){
              $action = $l['action'];
              echo "<p class='card-text'>$action</a></p><hr style='background-color: white;'>";
            }

          ?>
          <button style='background-color: #55555F; border-color: #55555F; width: 100%;' type='button' class='btn btn-secondary btn-block' id="showMore">Show more</button>

loadLogs.php

<?php

 include 'database.php';

  $logCount = $_POST['logCount'];

  $logs = DB::query("SELECT * FROM auditlog ORDER BY id DESC LIMIT $logCount");
  foreach($logs as $l){
    $action = $l['action'];
    echo "<p class='card-text'>$action</a></p><hr style='background-color: white;'>";
  }
  echo "<button style='background-color: #55555F; border-color: #55555F; width: 100%;' type='button' class='btn btn-secondary btn-block' id='showMore'>Show more</button>";

?>

Answer 1

如果你追加元素/动态元素，$（“＃id”）。click（function（）{事件监听器将无法正常工作。

你应该使用on / live，例如下面的例子

$( "#id" ).on( "click", function() {

我自己尝试过，对我来说很好。但不幸的是，live（）方法在jQuery 1.7版本中已被弃用，并在1.9版本中被删除。并且，他们建议使用on（）方法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var logCount = 4;
    $("#showMore").live('click', function(){
      logCount = logCount + 4;
      $("#showAuditLogs").val(logCount);
      $(".content").html("<button id='showMore'>Show More</button>");
    });
  });
</script>
<div>
<button id="showMore">Show More</button>
<input id="showAuditLogs" />
<div class="content"></div>

</div>