使用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调用的回调函数中进行

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

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

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