MathJax doesn't work inside Jquery .click event

Question

MathJax inside Jquery .click event doesn't work but outside that function it does.

Run the code snippet to see the effect.

$('#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 only runs once when the page is loaded. If you change the content of the page to include more math, you have to call MathJax manually to reprocess the math. See the MathJax Documentation for more details.

In your case, you need to queue a call to MathJax.Hub.Typeset() to process the modified content. See the example below. (Note also that you need to double the backslashes in the javascript string literals in order to include a backslash in your math.)

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