时间戳

首页 > 解决方案 > Ajax加载后按钮上的JQuery HTML onclick属性不起作用

javascript - Ajax加载后按钮上的JQuery HTML onclick属性不起作用

问题描述

我有以下通过 Ajax 从 PHP 代码加载的按钮。该按钮具有一个名为 viewImage 的函数的 onclick 属性。Ajax 请求在函数 loadImages 内每 5 秒发出一次。

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）都被正确引用。一切正常，除了上面提到的这个问题。

有人能帮我吗？

标签： javascriptphpjqueryajaxtwitter-bootstrap

解决方案

函数中不需要额外的超时，loadImage因为它只是在服务器响应 AJAX 调用后才调用，所以loadImage调用应该是同步的。添加超时将有效地使此调用异步，并且在多次单击后，异步 AJAX 调用将开始与异步图像加载调用发生冲突 - 这就是您所观察到的

推荐阅读