时间戳

首页 > 解决方案 > 使用 jQuery 加载内容后渲染 MathJax

javascript - 使用 jQuery 加载内容后渲染 MathJax

问题描述

我将一些包含 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 应用于我加载的内容，但是，到目前为止，加载新内​​容并一键排版并不起作用。

标签： javascriptjquerymathjax

解决方案

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

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

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

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

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

推荐阅读