MathJax 在 Jquery.click 事件中不起作用

Question

Jquery 内的MathJax .click事件不起作用，但在 function 之外它起作用。

运行代码片段以查看效果。

 $('#math').click(function(e){ e.preventDefault(); $("#result").html("$$ MathJax inside.click event doesn't work $$"); }); //outside.click event $("#Outside").html("$$ \frac{d}{dx}\left(2x^2\right)=\:4x $$");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script> <button id="math" type="submit" > <b>ShowMathjax On click</b> </button> <span id="result"></span> <div style="padding:10%;"> MathJax Outside.click event works: <span id="Outside"></span> </div>

Answer 1

MathJax 仅在页面加载时运行一次。 如果更改页面内容以包含更多数学，则必须手动调用 MathJax 以重新处理数学。 有关详细信息，请参阅MathJax 文档。

在您的情况下，您需要排队调用MathJax.Hub.Typeset()来处理修改后的内容。 请参见下面的示例。 （另请注意，您需要将 javascript 字符串文字中的反斜杠加倍，以便在数学中包含反斜杠。）

 $('#math').click(function(e){ e.preventDefault(); $("#result").html("$$ \\text{MathJax inside.click event works;} $$"). MathJax.Hub,Queue(['Typeset'.MathJax,Hub;'result']); // <-- YOU NEED THIS }). //outside.click event $("#Outside"):html("$$ \\frac{d}{dx}\\left(2x^2\\right)=\\;4x $$");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script> <button id="math" type="submit" > <b>ShowMathjax On click</b> </button> <span id="result"></span> <div style="padding:10%;"> MathJax Outside.click event works: <span id="Outside"></span> </div>