MathJax not rendering equations in WordPress AJAX-loaded content (renders only after manual typesetPromise())

Question

I’m building a custom WordPress plugin that loads math-based questions and answers using AJAX. These questions contain LaTeX-style MathJax expressions (e.g., $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$).

The Problem: MathJax equations do not render in the dynamically loaded content.

However, if I manually run this in the browser console:

MathJax.typesetPromise().then(() => console.log("✅ Done")); Then all equations render perfectly.

What Already Works: MathJax loads correctly on the page.

Static math (hardcoded or inserted via page editor) renders just fine.

MathJax config is included via wp_add_inline_script() before loading MathJax script.

🧠 Context: WordPress AJAX call (simplified):

function qm_ajax_fetch_question() {
 ...
 echo '<div class="qm-question-text">';
 echo get_the_content(); // includes MathJax like $$x = ...
 echo '</div>';
 wp_die();
}

frontend.js AJAX handler:

$.post(qm_ajax.ajax_url, {
 action: 'qm_fetch_question',
 ...
}, function(response) {
 $('#qm-question-area').html(response);
 // Attempted to re-render
 MathJax.typesetClear();
 MathJax.typesetPromise([document.getElementById('qm-question-area')])
 .then(() => console.log("✅ MathJax rendered dynamically"))
 .catch(err => console.error("❌ MathJax error", err));
});

🧪 What I’ve Tried (and didn’t fix the issue): Wrapping content in .mathjax-render divs

Adding slight delay using setTimeout(...)

Calling MathJax.typeset() instead

Confirmed MathJax is loaded and typesetPromise is available

Ensured no extra injection conflict

Ensured equations are present in the DOM ($$...$$) via innerHTML

What Does Work: When I manually run:

MathJax.typesetPromise() in the browser console after AJAX loads the content — the equations render perfectly.

What I Suspect: There may be:

A timing issue (MathJax is not detecting newly injected content)

Some HTML escaping or serialization by WordPress (e.g., )

Maybe WordPress sanitization or editor blocks interfering with MathJax parsing?

My Goal: I want MathJax to automatically render any $$...$$ equations that come in through AJAX content — without needing manual console commands.

Additional Info:

WordPress 6.4.x

MathJax 3 via https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js

Plugin is shortcode-based and outputs question dynamically

What I Need Help With: How can I force MathJax to render this injected equation automatically after inserting via AJAX?

Is there a more robust trigger or configuration I’m missing?

Any gotchas specific to WordPress+AJAX+MathJax?

Let me know if you need code snippets, logs, or sample screenshots. Appreciate any insights!

• mmm: does it works when you run MathJax.typesetPromise() (without specifying element) after content insertion ?
• C3roe: Have you tried an approach like shown under docs.mathjax.org/en/latest/web/typeset.html#typeset-async ?
• Davide Cervone: Your first code snippet has a comment about including MathJax in a div with id qm-question-text, but your typesetPromise() call is for qm-question-area. Could that be the problem? And when you say you checked via innerHTML, was that using console.log(document.getElementById('qm-question-area').innerHTML); right before the call to MathJax.typesetPromise()? It looks to me like this is either that jQuery hasn't actually inserted the HTML into the page yet, for you are asking MathJax to typeset the wrong container.
• Brentspine: Please be aware, that all usages of generative AI are banned