MathJax doesn't work in Jquery .click event

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