javascript - 使用 MathJax 向 DOM 添加元素？

Question

我正在尝试动态创建一个元素，然后对其进行一些处理。我试图在新创建的元素上使用 MathJax，但无法在其上拉取 MathJax.Hub.getAllJax。

我在控制台中输入了以下内容来测试:(MathOutput1 在 HTML 中定义)

MathJax.HTML.addElement(document.body, "div", {id: "blah"}, ['` `']);
<div id=​"blah">​` `​</div>​
MathJax.Hub.getAllJax("blah");
[]
MathJax.Hub.getAllJax("MathOutput1")
[Object]

有没有办法可以动态创建一个可以操作的元素？

我确实确认 div 元素 blah 已添加到 dom(至少根据 chrome)“”

谢谢:)

Answer 1

这里的问题是 MathJax operates asynchronously ，并且您尝试在 MathJax.Hub 例程完全完成之前访问新元素。

要解决此问题，您可以将对 MathJax.Hub.getAllJax() 的调用置于 Hub 回调队列的回调函数中:

function showBlahElement () {
    console.log(MathJax.Hub.getAllJax("blah"));
}

MathJax.HTML.addElement(document.body, "div", {id: "blah"}, ['$$a=b$$']);
MathJax.Hub.Queue(showBlahElement);

或者，您可以注册一个信号监听器，每当发生特定事件时(在本例中，每当排版新的数学时)都会触发该信号监听器:

MathJax.Hub.Register.MessageHook("New Math", function (message) {
  console.log(MathJax.Hub.getAllJax("blah"));
});

MathJax.HTML.addElement(document.body, "div", {id: "blah"}, ['$$a=b$$']);

有关详细信息，请参阅 API docs .