MathJax 渲染两次答案

【问题标题】：MathJax is rendering twiceMathJax 渲染两次
【发布时间】：2017-05-06 03:38:15
【问题描述】：

我有一个 MathJax 演示，可以在 Online Demo 观看。

在这个演示中，我在一个 div 中有一些 Tex 标记，可以由 MathJax 完美呈现。

但是，如果我通过单击 Add Math Markup 按钮然后单击 Rerender Math Markup 按钮以编程方式将一些 Tex 标记添加到上述 div，则会导致重复呈现先前呈现的数学标记。这可以在以下视频中看到：Math being rendered repeatedly

单击Rerender Math Markup 按钮时我所做的只是调用以下方法MathJax.Hub.Typset(divElement)。 divElement 是以编程方式添加 Tex 标记的 div。

我的情况的演示代码

<script>
   function reRenderMath() {
   var div = document.getElementById("mathMarkup");
   //render Math for newly added  Tex markup
    MathJax.Hub.Typeset(div);
   }
    function addMath() {
    var div = document.getElementById("mathMarkup");
    div.innerHTML = div.innerHTML + "$$\sin^{-1}.6$$";
    document.getElementById("btnRenderMath").disabled = false;
    }
</script>
<script type="text/x-mathjax-config">
   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<button type="button" onclick="addMath();return false;" id="btnAddMath" >Add Math Markup</button>
<button type="button" onclick="reRenderMath();return false;" id="btnRenderMath" disabled>Rerender Math Markup</button>
<div id="mathMarkup">
   $$x^2 = x +2$$
</div>

重复渲染的截图

【问题讨论】：

不要像那样重用innerHTML。将内容正确附加为新子项。此外，CDN 已停用。
谢谢。现在可以了。我通过将 Tex 标记作为文本节点添加到原始 div 而不是将 Tex 标记添加到此 div 的内部 html 来修改演示。修改后的演示在js.do/sun21170/mathjaxmodified
我使用了另一种方法来实现这一点，尽管你的方法是最好的。这种新方法的演示位于js.do/sun21170/mathjaxdualrenderingsolution。问题在于，对于每个 MathJax 渲染，都会创建一个 script 标签，并且在调用 MathJax.Hub.Typeset 方法时，这个脚本标签会导致双重渲染。因此，我在调用 MathJax.Hub.Typeset 之前删除了这些脚本元素，然后在方法返回后的回调中，我将这些脚本元素添加到它们原来的位置。不确定这是否是一种错误的方法？

标签： mathjax

【解决方案1】：

@Sunil感谢您的回答

总结：

所需脚本：

    var MathJaxUtils = (function () {
    let obj = {};
    let scripts = null;

    obj.render = function (element) {
        scripts = new Array();
        $(element).find("script[id^='MathJax-Element']").each(function () {
            scripts.push({
                displayElement: $(this).prev("div")[0],
                scriptElement: this
            });
        });
        //remove all html within MathJax script tags so it doesn't get typset again when Typeset method is called
        $(element).find("script[id^='MathJax-Element']").remove();
        //render Math using original MathJax API and in callback re-insert the MathJax script elements in their original positions
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, element, typeSetDone]);
    };

     //callback for Typeset method
     function typeSetDone() {
         for (var i = 0; i < scripts.length; i++) {
             $(scripts[i].displayElement).after(scripts[i].scriptElement);
         }
         //reset scripts variable
         scripts = [];
     };

    return obj;
 }());

基本使用：

let elem = document.getElementById("mathContainer");
MathJaxUtils.render(elem);

演示： math-jax-test

【讨论】：