使用MathJax和JQuery插入MathJax
最近，我开始在我的应用程序中使用MathJax，并使用JQuery来尝试为直觉/建设性逻辑编写编辑器。我面临的问题是，每当页面加载并使用MathML注入JQuery时，就无法正确地呈现。这是密码
<math display="block" id="mathml-derivation">
<mrow class="beginning">
</mrow>
</math>这是javascript
setTimeout(function() {
console.log("Started");
var $frac = document.createElement('mfrac');
$frac.innerHTML = '<mrow id="children' + parseInt(1) + '" class="conclusion">\
<mrow>\
<mi>b</mi>\
</mrow>\
</mrow>\
<mrow class="assumption">\
<mo>' + "\u22A2" + '</mo>\
<mrow class="goal clickable">\
<mi>a</mi>\
</mrow>\
</mrow>';
$("#mathml-derivation").append($frac);
console.log($frac);
MathJax.Hub.Typeset("mathml-derivation");
}, 1000);我不确定是什么问题。我之所以有一个setTimeout函数，是为了确保它在页面加载后至少执行一秒钟。当我立即或通过一个事件加载它时，MathML无法正确地呈现。我跟踪了一些关于StackOverflow的其他帖子，它说要使用'.Typeset‘函数，但是它不能正常工作。
最后，我使用Chrome进行开发，并使用MathJax实现兼容性。
回答 1
Stack Overflow用户
发布于 2016-06-13 11:12:55
你的小提琴手例子有几个问题。
您看到的使用超时的异常行为是由于您的MathJax和jQuery代码之间缺乏同步所致。在运行MathJax代码之前，jQuery可能已经完全加载，也可能没有加载。因此，您最终会遇到一个竞赛:当您设置一个低超时时，jQuery部件首先运行，并替换页面中(尚未进行MathJax处理的) MathML；然后MathJax进入并呈现它在DOM中找到的内容。
随着超时时间的延长，您将看到当MathJax第一次运行时会发生什么--您会遇到第二个问题: MathJax从DOM中移除源MathML，但在输出中将id从源中保留。这意味着jQuery部分最终会在MathJax (HTML或SVG)的输出中附加一个MathML片段(从而破坏它)。
现在，MathJax.Hub.Typeset("mathml-derivation"); (这并不理想，因为您应该始终使用MathJax的队列)将只呈现新的数学内容。但是，您的代码只是在输出中进行黑客攻击，而不让MathJax知道某些事情发生了变化。所以排队一个普通的排版不会对那个特定的节点做任何事情。如果您要求MathJax使用MathJax.Hub.Queue(["Rerender", MathJax.Hub]);重命名，您仍然不会看到任何效果，因为第二个问题是将MathML添加到输出中，而不是MathJAx在内部使用的源。
长话短说，您需要重新设计MathJax和jQuery之间的交互。您可能希望使用MathJax的队列机制，因为它是高度异步的。MathJax文档还描述了解决页面上数学更新问题的几种方法；"MathJax方法“是通过text方法更新源代码，尽管大多数开发人员会懒洋洋地删除整个输出节点，插入更改后的MathML，并将一个typeset排队(因为DOM中现在有了新的数学)。
请注意，MathJax不提供用于修改子表达式的API，因此您必须自己跟踪它，例如，保留一个表示MathML表达式状态的内部DOM节点，修改该节点，然后将其复制到DOM以更新可视化输出。
https://stackoverflow.com/questions/37774763
复制相似问题
腾讯云开发者
