jquery - google prettify 无法在从 jquery 加载调用的 block 中工作

Question

我是一个 jquery 初学者，这个问题可能反射(reflect)了这种无知。当我从 Prettify 的本地副本调用 Google Code Prettify 时遇到问题(也就是说，我正在使用

<script type="text/javascript" src="localpath/prettify.js"></script>

而不是

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> 

(在这种情况下问题消失)在我的 html head 标签中。问题如下:

如果我放

<pre class="prettyprint linenums">
print "test1\n";
print "test2\n";
print "test3\n";
</pre>

在主 html 文件中，它工作得很好。但是，如果我尝试使用 jquery 加载将辅助 html 文件加载到我的主 html 文件中，辅助 html 文件中的 prettfied 代码的样式不正确(未显示行号和关键字)。具体来说，我把它放在我的 html head 标签中:

<script>
  $(document).ready(function() 
  {
    $('#my_element').load('my_element.html');
    prettyPrint();
  });
</script>

并且 my_element.html 与主 html 文件中的代码块完全相同:

<pre class="prettyprint linenums">
print "test1\n";
print "test2\n";
print "test3\n";
</pre>

它被加载到 id == "my_element"的 div 标签中；但是，它在主页上的样式不正确。为什么？

Answer 1

由于 load 调用的异步性质，

prettyPrint() 在内容加载之前运行，请尝试将其放在回调中:

$('#my_element').load('my_element.html', function() {
    prettyPrint();
});