Question

I have many different MathJax formulas that are going to be dynamically moved around different lists on the webpage. I am trying to control this with JQuery and the append attribute.

In my script file I have various arrays of formulas and then a function that lists the formulas in the array inside of a specified div using .append. Here’s the code:

function listArray(array,div){
  for(var i=0; i<array.length; i++){
    $('#'+div).append('<li>'+array[i]); 
  }
};

I am having the problem that MathJax typesets the math before this script runs and so the appended formulas don’t display in TeX. Here is an example Fiddle:

http://jsfiddle.net/T8m64/92/

Does anyone know of a good fix for this? I have tried reading some of the documentation on re-typesetting MathJax, but I don’t really follow it.

Answer 1

There are two problems with your fiddle example. First, the array of math expressions loses the backslashes, because these are used as escape characters in the javascript strings. You need to double them:

var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];

Second, you need to tell MathJax to process the mathematics once you have added it to the page. Use

MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);

after appending the math in order to do that.

Version 120 of you fiddle shows a working version.