HTMX二次AJAX调用触发Uncaught RangeError问题求助

问题现象 #

今日启用HTMX后，网站两处功能出现相同异常：

• 点击<li>标签加载内容到指定div，首次执行正常，二次触发时控制台报错
• 点击提交按钮提交表单（已尝试在表单上使用submit触发器），首次执行正常，二次触发时控制台报错

相关代码 #

标签加载内容代码 #

<li class="content_first_tabs_li" 
    data-panel="content_panel_my_waitlists"
    hx-post="/waitlist/show_all"
    hx-trigger="click"
    hx-target="#wrap_waitlist"
    hx-swap="innerHTML"
>

表单提交按钮代码 #

<button class="button is-rounded is-success"  
    hx-post="/tags/create_new" 
    hx-target="#wrap_user_tags" 
    hx-swap="afterbegin" 
    hx-trigger="click delay:500ms"
>

错误信息 #

二次触发时控制台抛出：

Uncaught RangeError: Maximum call stack size exceeded

错误指向newXHR()函数，该函数代码如下：

function newXHR() {
    const realXHR = new window.oldXHR();

    realXHR.addEventListener("readystatechange", function() {
        // Only success responses and URLs that do not contains "debugbar_time" are tracked
        if (realXHR.readyState === 4 && realXHR.status.toString()[0] === '2' && realXHR.responseURL.indexOf('debugbar_time') === -1) {
            if (realXHR.getAllResponseHeaders().indexOf("Debugbar-Time") >= 0) {
                let debugbarTime = realXHR.getResponseHeader('Debugbar-Time');

                if (debugbarTime) {
                    let h2 = document.querySelector('#ci-history > h2');

                    if (h2) {
                        h2.innerHTML = 'History <small>You have new debug data.</small> <button onclick="loadDoc(' + debugbarTime + ')">Update</button>';
                        document.querySelector('a[data-tab="ci-history"] > span > .badge').className += ' active';
                    }
                }
            }
        }
    }, false);
    return realXHR;
}

已尝试的解决方法 #

• 更换多种触发器类型
• 添加触发延迟
  但问题仍未解决，寻求技术帮助。

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