Увеличивая счетчик (переменная 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>