MathJax in JQuery

前端未结

关注

 2  997

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 a

相关标签:

2条回答

再見小時候

2020-12-18 11:52
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

逝去的感伤

2020-12-18 11:55

I ran some tests as updates /93, /94, /95 of your fiddle, and found that the rendered formulas could be moved around but the whole thing was fragile. Sometimes a simple change or just a page refresh would cause the unrendered formulas to show, each one doubled-up, which I can't explain.

As you will see, I thought a setTimeout would fix things but now I don't think that's the case.

I think the bug is just a feature of running the code in jsFiddle. I can't induce the bug when running the code in a test page served locally under file:// protocol from my own computer and viewed in Opera.

Here's my test page :

<!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>

0 讨论(0)