ajaxComplete事件未触发问题排查及更优实现方案咨询

问题描述 #

无法提供最小复现示例，因为代码是针对Thinkific课程播放器编写的。页面存在多个AJAX请求，但以下代码始终无法触发：

$(document).ready(function() {
   $(document).ajaxComplete(function(event, xhr, settings) {
        console.log('triggered ajax');
   });
});

而添加setTimeout延迟绑定后，代码却能正常运行：

setTimeout(() => {
   $(document).ajaxComplete(function(event, xhr, settings) {
        console.log('triggered ajax');
   });
}, 200);

需要分析事件未触发的原因或提供排查思路，setTimeout的实现方式不够规范。曾尝试用XMLHttpRequest构建监听器，但因需要获取AJAX请求settings中的请求头，该方案不适用。

编辑：更可靠的解决方案 #

不再依赖固定的200ms等待时长，改用setInterval循环检查并尝试绑定ajaxComplete事件：

function checkAjax() {
    var events = $._data(document, "events");
    if (events.ajaxComplete) {
        clearInterval(ajaxInterval);
        console.log('ajax attached!');
        return;
    }
    console.log('waiting');
    $(document).ajaxComplete(function(event, xhr, settings) {
        console.log('triggered ajax');
    });
}
var ajaxInterval = setInterval(checkAjax, 200);

原因分析与排查思路 #

1. jQuery实例不一致：页面可能存在多个jQuery实例，$(document).ready绑定事件的实例和Thinkific发起AJAX请求的实例不是同一个，导致事件无法被触发。
2. 脚本加载顺序问题：$(document).ready仅监听DOM结构加载完成，但Thinkific的核心脚本可能在DOM就绪后才完成加载，此时jQuery的AJAX钩子尚未初始化，提前绑定的事件无法生效。
3. 事件被重置：Thinkific内部代码可能在后续操作中重置了document上的ajaxComplete事件绑定，提前绑定的事件被清除，延迟绑定则避开了这个重置流程。
4. AJAX钩子初始化时机：jQuery的ajaxComplete依赖内部钩子的初始化，若Thinkific对jQuery做了自定义修改，钩子初始化被推迟，导致早期绑定无效。

排查可以做这些操作：

• 在$(document).ready和延迟绑定的回调中分别打印jQuery.fn.jquery，确认是否为同一版本的jQuery实例。
• 打印$._data(document, "events")，对比不同时机下ajaxComplete事件的绑定状态。
• 用浏览器开发者工具查看AJAX请求的调用栈，确认请求是否通过jQuery发起。

内容的提问来源于stack exchange，提问作者UltrasoundJelly