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

Question

MathJax 在 Jquery .click 事件中不起作用，但在该函数之外它起作用。

运行代码片段看效果

$('#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 Documentation。

在您的情况下，您需要排队调用 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>

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

MathJax doesn't work inside Jquery .click event

html

javascript

jquery

mathjax