排版完成时的事件 MathJax 3答案

【问题标题】：Event when typesetting is done MathJax 3排版完成时的事件 MathJax 3
【发布时间】：2020-02-10 16:11:57
【问题描述】：

我正在使用 MathJax 3 来渲染数学方程式。问题是我需要在数学方程式中的一些符号上添加点击事件，所以我使用\cssId。


        loader: {
          load: ['[tex]/color','[tex]/cancel'],

        },

        tex: {
          packages: {'[+]': ['cancel']},
          inlineMath: [['$', '$'], ['\\(', '\\)']],
        },
    };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <p id="demo">  ${x^2+4\cssId{someid}{x}+\sum_{s}}$ </p>
    <script>$("#someid").click(function () {
      some code ....
    })
  </script>

点击事件不起作用，因为 id="" 尚未创建。我尝试像这样在 MathJax 排版之后使用 Promise。

<script>
$(document).ready(function () {
  MathJax.startup.promise.then(function () {
      $("#someid").click(function () {
  some code ....
})
  })
})

未捕获的类型错误：无法读取未定义的属性“承诺”

我也试过 MathJax.typesetPromise()。它也没有工作。提前致谢。

【问题讨论】：

标签： javascript mathjax

【解决方案1】：

这里有几个问题。首先，因为 MathJax 脚本有 async 属性，你不知道它什么时候会被处理，它可能在你的 $(document).ready() 调用之后，因为它似乎在这种情况下（因为 MathJax.startup 不是t 根据错误信息定义）。其次，$(document).ready() 仅表示主文档内容已加载完毕，并不表示 MathJax 已完成排版（甚至开始排版）。在您的情况下，您已要求加载几个 TeX 扩展，这导致 MathJax 必须等待这些扩展才能开始排版。 $(document).ready() 将在加载之前运行，因此在排版发生之前，因此在 someid 的元素可用之前。

为了正确处理这个问题，您需要改用 MathJax 的 ready 函数。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
 MathJax = {
   loader: {
     load: ['[tex]/color','[tex]/cancel']
   },
   tex: {
     packages: {'[+]': ['cancel', 'color']},
     inlineMath: [['$', '$'], ['\\(', '\\)']]
   },
   startup: {
     pageReady() {
       return MathJax.startup.defaultPageReady().then(function () {
          $("#someid").click(function () {
            alert('clicked!');
          }).css('cursor', 'pointer');
       });
     }
   }
 };
</script>

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

<p id="demo">  ${x^2+4\cssId{someid}{x}+\sum_{s}}$ </p>

这里我们使用startup.pageReady() 函数调用默认的页面就绪函数（它进行初始排版），并使用它返回的promise 来添加点击事件处理程序。这可以确保在这样做之前已经进行了排版。我还添加了 CSS 以在鼠标移到可点击数学上时更改指针，以直观地指示可以点击。

【讨论】：