文章/答案/技术大牛

发布

社区首页 >问答首页 >当排版完成MathJax 3时引发

问当排版完成MathJax 3时引发
EN

Stack Overflow用户

提问于 2020-02-10 16:11:57

回答 1查看 1.9K关注 0票数 2

我使用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排版之后，我试着像这样使用这些承诺。

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

Uncaught :无法读取未定义属性的“承诺”

我还尝试了MathJax.typesetPromise()。这也没用。提前谢谢。

javascript

mathjax

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-12 15:32:25

这里有几个问题。首先，因为MathJax脚本具有async属性，所以您不知道什么时候会处理它，也可能是在$(document).ready()调用之后(在本例中似乎是这样的)(因为MathJax.startup不是根据错误消息定义的)。其次，$(document).ready()只意味着主要文档内容已经加载，而不是MathJax已经完成其排版(甚至开始)。在您的示例中，您要求加载几个TeX扩展，这导致MathJax不得不在开始排字之前等待这些扩展到达。$(document).ready()将在加载之前运行，在排版之前运行，在具有someid的元素可用之前运行。

为了正确地处理这个问题，您需要使用MathJax的就绪函数。

<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()函数调用默认的页面就绪函数(它进行初始排版)，并使用它返回的承诺来添加单击事件处理程序。这样做之前，就可以确保排版已经完成。我还添加了CSS，以便在鼠标移动到可点击的数学上时更改指针，以直观地指示单击是可能的。

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60154233

复制

相似问题

问当排版完成MathJax 3时引发
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当排版完成MathJax 3时引发EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当排版完成MathJax 3时引发
EN