Блог

Я пытаюсь установить переменной в 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>";

?>
  

Если вы добавите элемент / динамический элемент, $(«#id»).click(функция(){ прослушиватели событий не будут работать должным образом.

Вы должны использовать 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>