TypeError: Cannot read properties of undefined, when trying to load MathJax to a div

Question

我正在构建一个为用户生成方程式和数学练习的系统。客户端发送 GET 请求以获取练习，服务器以适当的练习作为响应。为此，我生成了一个 ID 为“questionLoad”的新 div，并将其内容设置为给定的练习。我试图用 MathJax.Hub.Queue(['Typeset',MathJax.Hub,"loadQuestion"]); 的 mathjax 渲染它但后来我收到以下错误：

相关函数如下：

function startGame() {
    console.log("starting the game");
    let spinner = `
        <div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
`
    // adding a loading animation until the server responds
    $("#wrapper").html("<h3>Loading .... </h2>" + spinner); 
    
    let requestDict = { // telling the server to fetch a linear equation
        type: 'LinEq',
    };
    const requestJson = JSON.stringify(requestDict);
    fetch(`the server path`)
        .then(function(response) {
            return response.text();
        }).then(function(server_response) { 
            // change the text of the div from a loading to the loaded equation
            $("#wrapper").html(`<div id='loadQuestion'><span style='font-size:25px;'>${server_response}
                   </span></div>`);
            // load MathJax into the div. Doesn't work!
            MathJax.Hub.Queue(['Typeset', MathJax.Hub, "loadQuestion"]);
            
        });
}

如果有任何建议，我将不胜感激。谢谢！

Answer 1

您必须提供 DOM 元素作为第三个参数，而不是 DOM 元素的 ID。

MathJax 版本 2

MathJax.Hub.Queue([
    'Typeset', 
    MathJax.Hub, 
    $("#loadQuestion")[0]
])

工作沙箱示例：https://codesandbox.io/s/so-71615834-mj2-9w4b9f

MathJax 版本 3

MathJax.startup.promise.then(() => {
    MathJax.typesetClear([$("#holder")[0]]);
    MathJax.typeset([$("#holder")[0]]);
})

工作沙箱示例：https://codesandbox.io/s/so-71615834-mj3-yx1d41

在这两个版本中，如果您漏掉要排版的元素，整个页面都会重新排版。

TypeError: Cannot read properties of undefined, when trying to load MathJax to a div

TypeError: Cannot read properties of undefined, when trying to load MathJax to a div

html

javascript

jquery

mathjax

MathJax 版本 2

MathJax 版本 3