javascript - 排版完成时的事件 MathJax 3
问题描述
我正在使用 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>
click 事件不起作用,因为 id="" 尚未创建。我尝试在这样的 MathJax 排版之后使用 Promise。
<script>
$(document).ready(function () {
MathJax.startup.promise.then(function () {
$("#someid").click(function () {
some code ....
})
})
})
未捕获的类型错误:无法读取未定义的属性“承诺”
我也试过 MathJax.typesetPromise()。它也没有工作。提前致谢。
解决方案
这里有几个问题。首先,因为 MathJax 脚本有这个async
属性,所以你不知道它什么时候会被处理,它可能在你$(document).ready()
调用之后,因为它似乎在这种情况下(因为MathJax.startup
没有根据错误消息定义)。其次,$(document).ready()
仅表示主文档内容已加载,而不是 MathJax 已完成排版(甚至开始排版)。在您的情况下,您已要求加载几个 TeX 扩展,这导致 MathJax 必须等待这些扩展才能开始排版。将$(document).ready()
在加载之前运行,因此在排版发生之前,以及在元素 withsomeid
可用之前运行。
为了正确处理这个问题,您需要改用 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()
函数调用默认的页面就绪函数(它进行初始排版),并使用它返回的承诺来添加点击事件处理程序。这可以确保在这样做之前已经进行了排版。我还添加了 CSS 以在鼠标移到可点击数学上时更改指针,以直观地指示可以点击。
推荐阅读
- python-imaging-library - Odoo 14 使用 python 图像库 PIL 创建简单图像时出错
- python - 如何从用户的 python 环境中获取源并执行 pip 安装
- datagrip - Datagrip:在控制台中自动格式化 SQL 关键字
- sql-server - 身份插入是否有任何问题。没有它的其他并发操作会正常运行还是会产生缓慢或死锁?
- php - 使用 Recurly API v3 预览定价
- r - R:如何手动创建类“rq”的对象?
- slack - 在自己的工作空间上调用 Slack API 上的链接展开端点,在第 3 方工作空间上出现错误“cannot_find_channel”
- php - wordpress elementor css类/样式在某些页面上不起作用
- swift - 如何在 Storyboard 中更改按钮背景
- c# - 使用 WindowsIdentity.RunImpersonated 模拟时无法执行任何操作