更新 2：
对于更简单的脚本，您可以使用 jquery live 来处理动态创建的 dom。这就是问题所在吗？
更新 1：
我尝试将 ajax forget_tab_frame.aspx移出该$("#tabs").tabs({部分，这会产生奇怪的结果，即它只会返回未格式化的选项卡名称而没有选项卡内容。然后单击这些未格式化的选项卡，只需打开一个新窗口而不是显示选项卡内容。
原始问题：
以下脚本运行良好，它只是创建 3 个选项卡并tabs.aspx根据查询字符串从中获取每个选项卡的内容tab：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {
success: function(){
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.end()
.find( ".portlet-content" );
$(".column").disableSelection();
}
}
});
});
</script>
<style type="text/css">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li>
<li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li>
<li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li>
</ul>
</div>
</body>
</html>
我现在正在尝试数据库生成内容并使用 jquery使用以下脚本id="tabs"将生成的 html 插入到div 选项卡中：id="tabs"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {
success: function(){
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.end()
.find( ".portlet-content" );
$.ajax({
url: 'get_tab_frame.aspx?rand=' + Math.random(),
type: 'GET',
error: function(xhr, status, error)
{
alert(status);
alert(xhr.responseText);
},
success: function(results)
{
$("#tabs").empty().html(results);
}
});
$(".column").disableSelection();
}
}
});
});
</script>
<style type="text/css">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>
<div id="tabs"> </div>
</body>
</html>
由于某种原因，这不起作用。即使get_tab_frame.aspx产生完全相同的html，我也只是得到一个空白屏幕，即
<ul>
<li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li>
<li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li>
<li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li>
</ul>
我做错了什么，我该如何让它发挥作用？