按下按鈕時增加計數（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>