MathJax正在渲染两次

Question

我有一个MathJax演示，可以在在线演示中查看。

在这个演示中，我在一个div中有一些Tex标记，由MathJax完美渲染。

但是，如果我通过单击Add Math Markup按钮，然后单击重新渲染Math Markup按钮，以编程方式将一些Tex标记添加到上面的div中，那么它会导致重复渲染以前渲染的Math标记。这可以在以下视频中看到：数学被重复渲染

当点击Rerender Math Markup按钮时，我所做的就是调用以下方法MathJax。中心类型集（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>

重复渲染的屏幕截图

Answer 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;
 }());

基本用途：

js prettyprint-override">let elem = document.getElementById("mathContainer");
MathJaxUtils.render(elem);

演示：数学jax测试