jqMath does not render a formula when content is generated dynamically

Question

I'm looking at HTML which is generated dynamically with JavaScript. Here is how it is done

var el = $('body').find('div#my-div.main');
el.html('');
el.append($("<p>If $ax^2+bx+c=0$ with $a≠0$, then:$$x={-b±√{b^2-4ac}}/{2a}$$</p>"));

However no formula is rendered on the page. I see the exact text that is in the p tag. I did check the path to jqMath script and jqMath css and they are both correct.

Does anyone know why this is happening and how to fix it?

Answer 1

Call parseMath function once you append the formula like this -

        var el = $('body').find('div#my-div.main');
        el.html('');
        el.append("<p>If $ax^2+bx+c=0$ with $a≠0$, then:$$x={-b±√{b^2-4ac}}/{2a}$$</p>");
        jqMath.parseMath(document.body);