一般动作
JQuery UI的页签组件中，使用AJAX方式加载页签内容时，每次都从服务器重新加载?
问
参考官方示例（http://jqueryui.com/tabs/#ajax），使用ajax方式直接加载页签内容时，每次点击页签都会重新从服务器加载一遍，如何才能让ajax内容的页签只加载一次呢？否则表单中填写尚未提交的内容会由于页签重新加载而丢失！
示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="ajax/content1.html">Tab 1</a></li>
<li><a href="ajax/content2.html">Tab 2</a></li>
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>tabs-1</p>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="ajax/content1.html">Tab 1</a></li>
<li><a href="ajax/content2.html">Tab 2</a></li>
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>tabs-1</p>
</div>
</div>
</body>
</html>
答
JQuery UI 页签组件的机制就是这样的，每次点击页签时，会自动重新加载。
但是参考其API文档，有事件 beforeLoad，并且可以在这个事件中取消ajax加载，借用该事件，即可实现ajax页签只加载一次的效果。
修改后的javascript代码如下：
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
if ( ui.tab.data("loaded") ) return false;
ui.tab.data("loaded", true);
}
});
});