Question

我正在使用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（）函数应该使用漂亮的语法高亮显示前块，但是当通过jQuery load（）函数使用pre块加载文件时，这不起作用。

当我将预编码硬编码到主文件的内容div中时，它确实有效。

任何想法??

感谢目前为止的答案。我理解回调部分，我现在在load函数的回调中实现了SyntaxHighlighter.all（）调用，但仍然没有运气......

我会追加2个完整的文件，因为它们的大小非常小。

的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（）正确呈现硬编码的前块，但是加载函数的回调中的那个不起作用。

Answer 1

SyntaxHighlighter.all与window.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();
});

手指越过可行，如果没有（基于查看代码），您可能需要查看一些显式参数（其中{}是一组空配置参数，this将是从ajax加载处理程序调用时content：


  SyntaxHighlighter.highlight({}, this);

Answer 2

你需要在回调中调用它来加载：

  content.load("content/"+this.id+".html",function() {
     SyntaxHighlighter.all();
  });

load是异步的，所以当GET请求在后台完成时，它会继续执行语句。

jquery加载问题

2 个答案: