我有许多不同的 MathJax 公式，它们将在网页上的不同列表中动态移动。我正在尝试使用 JQuery 和 append 属性来控制它。
在我的脚本文件中，我有各种公式数组，然后是一个函数，它使用 .append 列出指定 div 内的数组中的公式。代码如下：
function listArray(array,div){
for(var i=0; i<array.length; i++){
$('#'+div).append('<li>'+array[i]);
}
};
我遇到的问题是 MathJax 在此脚本运行之前对数学进行排版，因此附加的公式不会在 TeX 中显示。这是一个 Fiddle 示例：
有没有人知道一个很好的解决方法？我已经尝试阅读一些关于重新排版 MathJax 的文档，但我并没有真正遵循它。
【问题讨论】：
您的小提琴示例存在两个问题。首先，数学表达式数组丢失了反斜杠，因为它们在 javascript 字符串中用作转义字符。您需要将它们加倍：
var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];
其次，您需要告诉 MathJax 在将数学添加到页面后对其进行处理。使用
MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);
为了做到这一点，在附加数学之后。
Version 120 你们的小提琴显示了一个工作版本。
【讨论】：
我运行了一些测试作为你的小提琴的更新/93、/94、/95，发现渲染的公式可以移动，但整个东西很脆弱。有时一个简单的更改或只是页面刷新会导致显示未渲染的公式，每个公式都加倍，我无法解释。
如您所见，我认为setTimeout 可以解决问题，但现在我认为情况并非如此。
我认为这个 bug 只是在 jsFiddle 中运行代码的一个特性。在我自己的计算机上以 file:// 协议在本地提供的测试页面中运行代码并在 Opera 中查看时，我无法引发该错误。
这是我的测试页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
body {
margin: 10px;
}
.jax {
display: none;
}
#list1, #list2 {
margin: 10px 0;
padding: 5px;
border: 1px solid #000;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
$(".jax").each(function(i, j){
var li = $("<li/>").append($(j).text());
$ul.append(li);
});
};
//move formulas from original spans into list1
listArray($("#list1") );
//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
$("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
$("#list1 li").eq(0).appendTo($("#list2"));
});
});
</script>
</head>
<body>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<span class="jax">\(\mathbb{Q}\)</span>
<span class="jax">\(\mathbb{Z}\)</span>
<ul id="list1"></ul>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<ul id="list2"></ul>
</body>
</body>
</html>
【讨论】：