加载外部HTML文件时MathJax无法渲染LaTeX公式如何解决？

• jQuery的.load()是异步AJAX方法：调用.load()后立刻执行MathJax.typeset()时，外部文件的LaTeX内容还没完成网络请求，也没插入到#content容器的DOM结构中，MathJax扫描不到待渲染的公式源码，自然无法生效。
• 点击时偶尔闪一下正确公式又变回源码，是极个别场景下请求响应速度刚好赶上typeset执行，临时渲染出了公式，但紧接着.load()的最终完成逻辑会把原始LaTeX源码重新写入容器，直接覆盖掉已经渲染好的公式DOM。
• MathJax脚本添加了async属性，首次点击时很可能MathJax本身还没初始化完成，直接调用MathJax.typeset()会触发未定义错误，渲染逻辑根本无法执行。

调整loadHTML函数的执行时序，把MathJax渲染逻辑放到.load()的完成回调中，等内容完全插入DOM之后再执行，同时增加状态判断避免MathJax未加载完成时报错：

function loadHTML(filename){
    const file = `formulas/${filename}`;
    $("#content").load(file, () => {
        // 确认MathJax加载完成后，仅针对新插入内容的容器执行渲染
        if (window.MathJax?.typesetPromise) {
            MathJax.typesetPromise([document.querySelector("#content")])
                .catch(err => console.error("公式渲染出错：", err));
        }
    });
}

优化提示：如果需要频繁切换加载不同公式文件，可以在每次load新内容前，先调用MathJax.typesetClear([document.querySelector("#content")])清空旧内容的渲染缓存，避免重复渲染导致的样式错乱。

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