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

Posted 2023-05-08

【中文标题】Ajax加载后按钮上的JQuery HTML onclick属性不起作用

【英文标题】：JQuery HTML onclick attribute on button not working after Ajax load

【发布时间】：2020-01-26 20:57:26

【问题描述】：

我有以下通过 Ajax 从 php 代码加载的按钮。该按钮具有一个名为 viewImage 的函数的 onclick 属性。 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）。一切正常，除了上面提到的这个问题。

有人可以帮我吗？

【问题讨论】：

这可能是堆叠超时的问题。考虑到每次调用loadImages() 时，您都会开始调用 load 的逻辑递归循环，然后在 5 秒后再次调用该方法。所以第一次调用该方法时，您有一个逻辑循环。然后，你的图片点击调用viewImage，它作为成功调用loadImage。因此，每次单击图像时，都会开始另一个逻辑循环，该循环永远不会被终止。

我认为这是问题所在，没有注意到。从loadImages() 中删除setTimeout 解决了我的问题。

【参考方案1】：

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