MathJax не работает внутри события Jquery .click

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>


javascript html jquery mathjax
person Gragas Incoming    schedule 23.02.2018    source источник
comment
Возможный дубликат MathJax в JQuery   -  person Peter Krautzberger    schedule 25.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

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>

person Davide Cervone    schedule 24.02.2018