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

标签 javascript php jquery ajax twitter-bootstrap

我有以下按钮,它是通过 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)均被正确引用。除了上面提到的这个问题之外,一切正常。

有人可以帮助我吗?

最佳答案

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

关于javascript - Ajax 加载后按钮上的 JQuery HTML onclick 属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58119184/

相关文章:

javascript - 如何使用 mat-checkbox 进行验证?

javascript - 防止在 setView 之后在 Leaflet 中触发 moveend 事件

JavaScript onchange 函数

javascript - 将对象从 Javascript 传递到 C++

javascript - 在 jQuery 中将 HTML 附加到 HTML 字符串

php - 如何在wordpress中实现分页

php - CodeIgniter - ci_sessions 迁移

php - 从对象中获取父对象

jquery - 使用jquery显示10秒内的点击次数

javascript - 如何使用 Jquery 选择这个特定的 td 元素及其文本