使用 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。为什么它不起作用有什么建议吗？

编辑我添加了第二个带有二次点击功能的按钮，它运行以下脚本

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

如果我单击第一个按钮，它会在不应用 MathJax 的情况下加载新内容。如果我现在单击第二个按钮，它会将 MathJax 应用于新内容。这告诉我可以将 MathJax 应用于我加载的内容，但是，加载新内容并通过单击对其进行排版目前还行不通。

Answer 1

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

为了确保在数学加载后进行排版，对 MathJax.typeset 的调用必须发生在提供给 load 调用的回调函数中。根据示例 in the jQuery documentation，这看起来像

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

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

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

使用 jQuery 加载内容后呈现 MathJax

Rendering MathJax after loading content with jQuery

javascript

jquery

mathjax