Question

更新2：

对于更简单的脚本，您可以使用jquery live来处理动态创建的dom。这就是问题所在吗？

更新1：

我尝试将get_tab_frame.aspx的ajax移出$("#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>

我现在正在尝试数据库生成id="tabs"的内容，并使用jquery使用以下脚本将生成的html插入id="tabs" div选项卡：

<!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>

我做错了什么以及如何让它发挥作用？

Answer 1

可能是因为你在将html加载到div之前调用了$（“＃tabs”）。tabs（）。

.tabs（）函数将当前内容转换为标签 - 而且您没有内容。使用ajax更改内容时，它不会自动更改选项卡。

如果在加载内容后调用$（“＃tabs”）。tabs（），它可能会有效。

Answer 2

http://jsfiddle.net/niklasvh/3RpC8/

数据库生成jquery选项卡

2 个答案: