分屏Web应用中JQuery .on('click')事件未触发问题排查

看起来你遇到的这个问题挺典型的——单独执行阻止默认行为+显示Loading，或者单独发起Ajax请求都没问题，但两者结合在一起就失效了，这大概率是因为修改父页面iframe的srcdoc时，当前页面的事件处理上下文被干扰，导致preventDefault()没能完全拦截浏览器的默认跳转行为。

下面是几个可行的解决方案，你可以逐一尝试：

方案1：优先锁定默认行为，优化操作顺序 #

先把阻止默认行为的逻辑放在最前面，同时移除链接的target="_blank"属性（避免浏览器提前触发新标签页打开的逻辑），再执行后续操作：

<script>
$(document).on("click", "a", function(e) {
    // 第一时间拦截所有默认行为和事件冒泡
    e.preventDefault();
    e.stopPropagation();
    
    const $link = $(this);
    // 移除target属性，消除浏览器默认跳转的潜在触发点
    $link.removeAttr('target');
    
    const link = $link.attr('href');
    if (!link) return;

    // 显示Loading状态
    const oframe = parent.document.getElementById("oframe");
    oframe.srcdoc = "<html><head></head><body><p>Loading</p></body></html>";

    // 发起Ajax请求
    $.ajax({
        url: "/newOrigin",
        data: {"link": link},
        type: "POST",
        success: function(response) {
            oframe.srcdoc = response.site;
        },
        error: function(error) {
            console.error("请求失败：", error);
            // 可选：加载失败时替换为错误提示
            oframe.srcdoc = "<html><head></head><body><p>加载失败，请重试</p></body></html>";
        }
    });
});
</script>

改动原因说明 #

• 使用事件委托（$(document).on("click", "a", ...)）代替直接绑定到$("a")，不仅更健壮，还能兼容页面后续动态加载的链接。
• 先移除target="_blank"，避免浏览器在事件处理过程中，因为这个属性绕过preventDefault()提前触发跳转。
• 把阻止默认行为的逻辑放在最开头，确保第一时间拦截浏览器的跳转动作，不给它执行默认行为的机会。

方案2：将Loading状态移到Ajax的beforeSend回调 #

如果修改父页面元素确实会干扰当前事件上下文，你可以把显示Loading的逻辑延迟到Ajax请求发起前，让事件处理流程更连贯：

<script>
$(document).on("click", "a", function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const link = $(this).attr('href');
    if (!link) return;

    $.ajax({
        url: "/newOrigin",
        data: {"link": link},
        type: "POST",
        beforeSend: function() {
            // 发起请求前再显示Loading，减少对当前事件上下文的干扰
            parent.document.getElementById("oframe").srcdoc = "<html><head></head><body><p>Loading</p></body></html>";
        },
        success: function(response) {
            parent.document.getElementById("oframe").srcdoc = response.site;
        },
        error: function(error) {
            console.error("请求失败：", error);
            parent.document.getElementById("oframe").srcdoc = "<html><head></head><body><p>加载失败，请重试</p></body></html>";
        }
    });
});
</script>

改动原因说明 #

把Loading的设置延迟到Ajax请求发起前，避免在事件处理的早期就修改父页面元素，减少对当前页面事件上下文的干扰，确保preventDefault()能完全生效。

方案3：用setTimeout延迟修改srcdoc（应急方案） #

如果上面的方案都没效果，你可以尝试用setTimeout给修改srcdoc的操作加一小段延迟，让preventDefault()有足够的时间完成拦截：

<script>
$(document).on("click", "a", function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const link = $(this).attr('href');
    if (!link) return;

    // 延迟10ms显示Loading，给preventDefault足够的执行时间
    setTimeout(() => {
        parent.document.getElementById("oframe").srcdoc = "<html><head></head><body><p>Loading</p></body></html>";
    }, 10);

    $.ajax({
        url: "/newOrigin",
        data: {"link": link},
        type: "POST",
        success: function(response) {
            parent.document.getElementById("oframe").srcdoc = response.site;
        },
        error: function(error) {
            console.error("请求失败：", error);
        }
    });
});
</script>

额外排查点 #

• 确认左侧页面的jQuery已加载完成：可以在注入的脚本开头加console.log($)，检查控制台是否输出jQuery对象。
• 排查是否有其他脚本冲突：如果页面中还有其他点击事件处理程序，可能会干扰你的代码，可以尝试添加e.stopImmediatePropagation()（谨慎使用，可能影响其他功能）。

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