Return to Revisions

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!