使用 jQuery 加载内容后渲染 MathJax

Question

我使用 jQuery 将一些包含数学的内容加载到我的 html 文件中。 现在我想让 Mathjax 排版这个新内容，但它不起作用。 这就是我的 JavaScript 代码的样子

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>


<script>
      $(document).ready(function(){
        $("#newContent").click(function(){
          $("#content").load("{% static 'newContent.txt' %}");
          MathJax.typeset();
        });
      });
</script>

但它只加载内容而不应用 MathJax。 有什么建议为什么它不起作用？

---

编辑我添加了第二个按钮，第二次单击 function，它运行以下脚本

<script>
  function myfunction(){
    MathJax.typeset();
  }
</script>

如果我单击第一个按钮，则它会加载新内容而不应用 MathJax。 如果我现在单击第二个按钮，它会将 MathJax 应用于新内容。 这告诉我可以将 MathJax 应用于我加载的内容，但是，加载新内容并一键排版到目前为止还不起作用。

Answer 1

这是因为load发送了一个异步的AJAX请求。 这意味着有可能（并且很可能）调用load之后的代码在服务器发送响应之前执行。 在上面的示例中，对load的调用启动了一个异步请求，然后对MathJax.typeset()的调用在页面上仍然没有数学运算时运行，因此没有任何反应。 最后， load请求完成，加载数学内容。

为了确保在加载数学后进行排版，对MathJax.typeset的调用必须发生在提供给load调用的回调 function 中。 基于jQuery 文档中的示例，这看起来像

$("#content").load("{% static 'newContent.txt' %}", () => MathJax.typeset());

您可以通过在数组中提供其 id 来让 MathJax 知道要呈现哪个元素：

$("#content").load("{% static 'newContent.txt' %}", () => MathJax.typeset(['content']));