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

【问题标题】：Second call to Mathjax typeset function from jQuery not working从 jQuery 对 Mathjax 排版函数的第二次调用不起作用
【发布时间】：2019-10-17 10:02:24
【问题描述】：

我正在尝试使用 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/mathjax@3.0.0/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>

点击按钮第二次出现如下错误：

未捕获的类型错误：无法读取 null 的属性“appendChild” 在 l.append (tex-mml-chtml.js:1)

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

【问题讨论】：

这工作得很好。删除按钮后悬空的
后尝试

这是错误之一。感谢您指出。问题是，多次按下按钮后 MathJax.typeset 命令不起作用。我已经编辑了

问题。

标签： javascript ajax mathjax typeset

【解决方案1】：

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

$("#check").click(function(){
    $("#qPreview").empty().append("<p>" + $("#input").val() + "</p>");
    MathJax.typeset(["#qPreview"]);
});

<script src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/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 选择器字符串。提供一个元素数组会将排版限制为仅这些元素的内容。

【讨论】：

非常感谢您的帮助。它解决了我的问题。
@Asheshanand Acharya，如果它解决了您的问题，请接受答案。我遇到了同样的问题（第一次正确呈现公式，但之后 LaTex 字符串按原样显示）。我按照 hakkelt 的建议通过调用 .empty() 然后调用 .append() 来修复它。
我不明白，该解决方案只有在我将 $("#input").val() 附加到 div 时才对我有效，但如果我以正确的格式放置任何其他文本，它失败。什么鬼？