How do I format html with MathJax after loading it using jQuery.load?

问题

I am loading a new page with jQuery.load. However, the contents are being treated weirdly somehow. On the original page, I have some code to format latex commands with MathJax:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

And this works fine for the original file. However, when I click on my link and insert more HTML into the page:

<script>
  $(document).ready(function(){
    $("#link").click(function(){
      $("#myDiv").load("test.html");
    });
  });
</script>

Now the special characters are not formatted by MathJax and are just displayed as-is.

回答1:

Carols 10cents is close, but you need to do the MathJax.Hub.Queue() call in a callback from the jQuery load() so that the typesetting isn't performed until after the file is loaded. (As it stands, it happens immediately after the file load is requested, even though the file may not be available yet). Something like

<script>
  $(document).ready(function(){
    $("#link").click(function(){
      $("#myDiv").load("test.html", function () {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myDiv"]);
      });
    });
  });
</script>

See the examples from a talk I gave at the JMM in January 2013 for more details and the solution to other situations.

回答2:

MathJax only processes markup on page load by default, so you need to tell it to process again after you load the new content onto the page. The documentation for MathJax for modifying math on the page recommends, if you only want to process only the new content you added, to do something like:

<script>
  $(document).ready(function(){
    $("#link").click(function(){
      $("#myDiv").load("test.html");
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myDiv"]);
    });
  });
</script>

They mention a few other ways to do this depending on your application, so I recommend reading that page to find the best way for you.

来源：https://stackoverflow.com/questions/20767122/how-do-i-format-html-with-mathjax-after-loading-it-using-jquery-load

标签

javascript

jquery

html

mathjax