我正在使用jQuery加载功能异步加载页面,如下所示:

tree.click(function() {
                if ($(this).hasClass("file")) {
                    tree.removeClass("selected");
                    $(this).addClass("selected");
                    content.load("content/"+this.id+".html");
                    contentContainer.effect("highlight");
                    SyntaxHighlighter.all();
                }
            });

外部页面之一如下所示:
<pre class="brush: java;">
   /**
     * The HelloWorldApp class implements an application that
     * simply prints "Hello World!" to standard output.
     */
   class HelloWorldApp {
      public static void main(String[] args) {
         System.out.println("Hello World!"); // Display the string.
      }
   }
</pre>

现在是SyntaxHighlighter.all();从上面的tree.click()函数中进行调用应以漂亮的语法高亮显示pre块,但是当通过jQuery load()函数将pre块加载到文件时,此操作无效。

但是,当我将pre块硬编码到主文件的内容div中时,它确实起作用。

有任何想法吗??

感谢到目前为止的答复。
我了解回调部分,并且现在在load函数的回调中实现了SyntaxHighlighter.all()调用,但是仍然没有运气...

我将附加2个完整文件,因为它们的atm大小很小。

index.php:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>braindump</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
    <link type="text/css" href="css/jquery.treeview.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.treeview.js"></script>
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shCore.js"></script>
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shBrushJava.js"></script>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var tree = $("#tree li");
            var contentContainer = $("#contentContainer");
            var content = $("#content");

            SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.0.320/scripts/clipboard.swf';
            SyntaxHighlighter.all();

            // Treeview
            $("#tree").treeview({
                persist: "location",
                collapsed: true
            });

            tree.click(function() {
                if ($(this).hasClass("file")) {
                    tree.removeClass("selected");
                    $(this).addClass("selected");
                    content.load("content/"+this.id+".html", function() {
                        contentContainer.effect("highlight");
                        SyntaxHighlighter.all();
                    });
                }
            });

        });
    </script>
</head>
<body>
    <div id="container">
        <div id="header">

        </div>

        <div id="leftMenu" class="thinDottedBorder">
            <div class="min500px"></div>
            <ul id="tree" class="filetree">
                <li>
                    <span class="folder selectable">Design Patterns</span>
                    <ul>
                        <li id="softwareengineering/designpatterns/decorator" class="file"><span class="file selectable">Decorator Pattern</span></li>
                        <li id="softwareengineering/designpatterns/visitor" class="file"><span class="file selectable">Visitor Pattern</span></li>
                        <li id="softwareengineering/designpatterns/chainofresponsibility" class="file"><span class="file selectable">Chain of Responsibility</span></li>
                    </ul>
                </li>
                <li>
                    <span class="folder selectable">Design Principles</span>
                    <ul>
                        <li></li>
                    </ul>
                </li>
            </ul>
            <div class="clear"></div>
        </div>

        <div id="contentContainer" class="thinDottedBorder">
            <div class="min500px"></div>
            <div id="content">
                <pre class="brush: java;">
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
class HelloWorldApp {
   public static void main(String[] args) {
      System.out.println("Hello World!"); // Display the string.
   }
}
</pre>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</body>

和另一个文件:
<pre class="brush: java;">
 /**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
 class HelloWorldApp {
    public static void main(String[] args) {
       System.out.println("Hello World!"); // Display the string.
    }
  }
</pre>

请注意,最初通过SyntaxHighlighter.all()正确呈现了硬编码的pre块,但是load函数的回调中的那个不起作用。

最佳答案

SyntaxHighlighter.allwindow.onload事件相关联-事件仅触发一次。

要在页面加载后突出显示语法,请改用highlight函数:

content.load("content/"+this.id+".html", function () {
  // this is executed after the content is injected to the DOM
  contentContainer.effect("highlight");
  SyntaxHighlighter.highlight();
});

如果这行之有效,如果不能(基于查看代码),您可能需要插入一些显式参数(其中{}是一组空的配置参数,而从ajax加载处理程序调用时this将是content):

  SyntaxHighlighter.highlight({}, this);

10-05 20:45
查看更多