jQuery中如何在表单提交后等待新页面加载并检测元素？

你的问题核心在于：表单提交后浏览器会立即开始跳转，当前页面的JS代码还没等新页面加载就已经执行完毕（甚至当前页面会被销毁），所以你在submit事件里直接检测新页面的元素，肯定是检测不到的——因为那个元素根本还没出现在当前页面里。

最直接的解决方案：把检测逻辑放到跳转后的首页 #

既然登录成功才会跳转到首页并显示#someHomePageElement，那我们直接在首页的JS代码里做判断就好，等首页完全加载完成后再检查元素是否存在，存在就调用追踪函数：

// 首页的JS代码
$(window).on('load', function() {
    // 确保页面所有元素都加载完成后再检测
    if ($('#someHomePageElement').length > 0) {
        alert("hello"); // 这里替换成你的登录追踪函数
        // 比如 trackLoginSuccess();
    }
});

为什么之前的document.ready和window.load没用？因为你是把它们写在登录页面的submit事件里，这些事件只会在当前登录页面触发，而登录页面马上就要被浏览器卸载了，根本等不到新页面加载。

进阶优化：避免直接访问首页时误触发 #

如果担心用户直接访问首页也会触发函数，可以结合sessionStorage做一个登录尝试的标记：

1. 登录页面的submit事件里添加标记：

$(document).on("submit", "#myForm", function() {
    // 标记用户正在尝试登录
    sessionStorage.setItem('isLoginAttempt', 'true');
});

2. 首页的代码里先检查标记，再判断元素：

$(window).on('load', function() {
    const isLoginAttempt = sessionStorage.getItem('isLoginAttempt');
    if (isLoginAttempt === 'true' && $('#someHomePageElement').length > 0) {
        alert("hello"); // 调用追踪函数
        // 用完标记后立即清除，避免下次进入首页误触发
        sessionStorage.removeItem('isLoginAttempt');
    }
});

如果是AJAX异步提交表单（页面不刷新） #

如果你的表单是用AJAX异步提交的（页面不会跳转，只是局部更新内容），那可以在请求完成后等待DOM更新，再检测元素：

$(document).on("submit", "#myForm", function(e) {
    e.preventDefault(); // 阻止默认的表单跳转行为

    $.ajax({
        url: $(this).attr('action'),
        method: $(this).attr('method'),
        data: $(this).serialize(),
        success: function() {
            // 短暂等待DOM更新，或者用MutationObserver监听元素变化（更可靠）
            setTimeout(function() {
                if ($('#someHomePageElement').length > 0) {
                    alert("hello"); // 调用追踪函数
                }
            }, 300); // 时间可以根据实际情况调整
        },
        error: function() {
            // 登录失败，不执行任何追踪逻辑
        }
    });
});

这个方法适合页面不刷新的场景，但如果是普通的同步表单提交，还是第一种方法最稳妥。

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