jquery加载问题 [英] jquery load issue
问题描述
我正在使用jQuery加载函数异步加载页面，如下所示：
I'm loading pages asynchronously with the jQuery load function, like this:
tree.click(function() {
if ($(this).hasClass("file")) {
tree.removeClass("selected");
$(this).addClass("selected");
content.load("content/"+this.id+".html");
contentContainer.effect("highlight");
SyntaxHighlighter.all();
}
});
其中一个外部页面如下所示：
One of the external pages looks like this:
<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块加载文件时，这不起作用。
now the SyntaxHighlighter.all(); call in the tree.click() function from above should render the pre block with pretty syntax highlighting, but when loading the file with the pre block via the jQuery load() function this doesn't work.
当我将pre块硬编码到主文件的内容div中时，它确实有效。
When I hardcode the pre block into the content div of the main file, it does work, however.
任何想法??
感谢目前为止的答案。
我理解回调部分，我现在在加载函数的回调中实现了SyntaxHighlighter.all（）调用，但仍然没有运气......
Thanks for the answers so far . I understand the callback part and I implemented the SyntaxHighlighter.all() call in the callback of the load function now, but still no luck...
我会追加2个完整的文件，因为它们的大小非常小。
I'll append the 2 complete files, as they are rather small in size atm.
index.php：
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（）正确呈现，但是在load函数的回调中不起作用。
please note that initially the hardcoded pre block is rendered correctly by SyntaxHighlighter.all(), but the one in the callback of the load function doesn't work.
推荐答案
SyntaxHighlighter.all 绑定到 window.onload 事件 - 只触发一次。
SyntaxHighlighter.all ties into the window.onload event - which only fires once.
语法高亮显示后页面加载，使用突出显示函数：
To syntax-highlight after the page loads, use the highlight function instead:
content.load("content/"+this.id+".html", function () {
// this is executed after the content is injected to the DOM
contentContainer.effect("highlight");
SyntaxHighlighter.highlight();
});手指交叉有效，如果没有（基于查找）在代码中你可能需要查看一些显式参数（其中 {} 是一组空的配置参数，这个将是 content load handler）：
Fingers crossed that works, if not (based on looking at the code) you might need to chuck in some explicit arguments (where {} is an empty set of configuration parameters, and this will be content when called from the ajax load handler):
SyntaxHighlighter.highlight({}, this);
这篇关于jquery加载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
