从jQuery对Mathjax排版函数的第二次调用不起作用

问题描述 投票:-1回答:1

我正在尝试使用MathJax将在HTML文本框中(在Tex中)键入的方程式视为数学方程式。如果未正确查看方程式,则需要在数学方程式中对方程式进行编辑和检查。

第一次,它可以正常工作。 但是执行编辑后,Mathjax排版命令显示错误。请您仔细阅读,并提出可能的错误。

我正在使用的HTML是:

<html>
    <head>
        <title>
            Equation Edit
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js"></script>
    </head>
    <body>
        <strong> Here is the result :<br></strong>
        <input type="text" id=input value="\(ax^2 + bx + c = 0\)">
        <div id="qPreview"></div>
            <button id="check">Click</button>
    </body>
</html>

我正在使用的脚本是:

<script type="text/javascript">
            var eq;
            $("#check").click(function(){
                eq=document.getElementById("input").value;
                document.getElementById("qPreview").innerHTML=eq;
                MathJax.typeset(qPreview[0]);
            });

        </script>

当我单击按钮时,它第二次显示以下错误:

未捕获的TypeError:无法读取null的属性'appendChild'在l.append(tex-mml-chtml.js:1)

我是javascript新手。在此先感谢您分享任何错误或建议,以使代码正常工作。

javascript ajax mathjax typeset
1个回答
0
投票

我遇到了同样的问题,我认为这可能是一个错误。无论如何,可以通过将方程式渲染到“ qPreview” div内的辅助“ p”标签,然后在修改方程式时删除并重新创建此标签来解决。例如:

$("#check").click(function(){
    $("#qPreview").empty().append("<p>" + $("#input").val() + "</p>");
    MathJax.typeset(["#qPreview"]);
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<strong> Here is the result :<br></strong>
<input type="text" id=input value="\(ax^2 + bx + c = 0\)">
<div id="qPreview"></div>
<button id="check">Click</button>

一些代码注释:

  • [如果您使用的是jQuery,则可以使用它代替getElementById函数来使您的生活更轻松:使用可以编写$("#input").val()而不是document.getElementById("input").value
  • qPreview变量未定义,因此MathJax.typeset(qPreview[0])将导致错误。
  • MathJax.typeset()不希望任何参数或列表作为参数。 (这就是"#qPreview"在我的代码中放在方括号中的原因)。有关更多信息,请参见documentation

    这两个函数都带有一个可选参数,该参数是应处理其内容的元素数组。元素可以是实际的DOM元素,也可以是元素或元素集合的CSS选择器字符串。提供元素数组会将排版限制为仅这些元素的内容。

© www.soinside.com 2019 - 2024. All rights reserved.