Атрибут JQuery HTML onclick для кнопки не работает после загрузки Ajax

Question

У меня есть следующая кнопка, которая загружается из кода PHP через Ajax.Кнопка имеет атрибут onclick для функции под названием viewImage.Запрос Ajax выполняется каждые 5 секунд в функции loadImages.

Кнопка со страницы get.php (не полный код, потому что я думаю, что он не нужен, поскольку я считаю, что это проблема JQuery):

<button onclick="viewImage(<?php echo $imageID; ?>)" id="watch" class="btn btn-outline-warning">VIEW</button>

Функции JS / Ajax:

function viewImage(imageID) {
  $.ajax({
    type: "POST",
    url: "./php/images/view.php",
    data: {imageID: imageID},
    success: function() {
        loadImage();
    }
  });
}

function loadImage() {
   $('#images').load('./php/images/get.php', function(){
     setTimeout(loadImage, 5000);
   });
};

Проблема в том, что иногда после загрузки Ajax я едва могу нажать на кнопку, чтобы перейти к функции.Мне нужно нажать несколько раз, чтобы работать должным образом, поскольку кнопка продолжает мигать / мерцать, как вы можете видеть здесь

.

Это происходит только после нескольких (2–4) загрузок Ajax.

Я удалил CSS-стили для кнопок, и он перестал мигать / мерцать, но мне все равно пришлось нажимать на него.несколько раз, чтобы это сработало.

Все файлы, функции и переменные (например, $ imageID) ссылаются правильно.Все работает, кроме указанной выше проблемы.

Может кто-нибудь мне помочь?

Answer 1

Нет необходимости в дополнительном тайм-ауте в функции loadImage, поскольку он вызывается только после того, как сервер ответил на вызов AJAX, поэтому вызов loadImage должен быть синхронным.Добавление тайм-аута сделает этот вызов асинхронным, и после нескольких щелчков асинхронные вызовы AJAX начнут сталкиваться с асинхронными вызовами загрузки изображений - это то, что вы наблюдаете