无法在 jQueryUI 选项卡内创建 jsTree答案

【问题标题】：Cannot create a jsTree inside of a jQueryUI tab无法在 jQueryUI 选项卡内创建 jsTree
【发布时间】：2010-04-02 00:19:47
【问题描述】：

我无法在 jQuery UI 选项卡中创建 jsTree。如果我在选项卡之外创建 jsTree，它工作正常。有人知道 jsTree 是否与 jQuery UI 选项卡不兼容吗？

我的页面在下面。如果我替换以下行

var treeContainer = jQuery("#tabTree");

与：

var treeContainer = jQuery("#pageTree");

然后树在选项卡控件下方的页面中加载良好。

<body>
    <div id="myTabs">
        <ul>
            <li><a href="tab1.html">Tab 1</a></li>
            <li><a href="tab2.html">Tab 2</a></li>
            <li><a href="tab3.html">Tab 3</a></li>
        </ul>
    </div>

    <div id="pageTree"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>         
    <script type="text/javascript" src="jsTree/jquery.tree.js"></script>
    <script type="text/javascript">     
        $(function(){

            $("#myTabs").tabs();

            var treeContainer = jQuery("#tabTree");
            var treeData = {
                data: {
                    type : "json",
                    opts : {
                        static : [
                            {
                                data: "A node",
                                children: [
                                    { data : "Child node 1" },
                                    { data : "Child node 2" },
                                    { data : "Child node 3" }
                                ]
                            }
                        ]

                    }
                }
            };
            treeContainer.tree(treeData);
        });     
    </script>
</body>

这是tab3.html的内容：

<div id="tab3Container">        
    <div id="tabTree"></div>
</div>

【问题讨论】：

你能给我们看一些代码吗？
@Justin Ethier：用代码更新问题。

标签： jquery jquery-ui jquery-ui-tabs jstree

【解决方案1】：

这些选项卡中的内容在您单击选项卡加载之前不存在，因此选择器jQuery("#tabTree") 没有任何匹配项，尚不存在与该选择器匹配的元素。您需要在加载该 ajax 页面时运行此代码，如下所示：

var treeLoaded = false;
$("#myTabs").bind( "tabsload", function(event, ui) {
  if(!treeLoaded && jQuery("#tabTree", ui.panel).length) {
    var treeContainer = jQuery("#tabTree");
    var treeData = {
        data: {
            type : "json",
            opts : {
                static : [
                    {
                        data: "A node",
                        children: [
                            { data : "Child node 1" },
                            { data : "Child node 2" },
                            { data : "Child node 3" }
                        ]
                    }
                ]

            }
        }
    };
    treeContainer.tree(treeData);
    treeLoaded = true;
  }
});

tabsload 事件 described here 在加载 ajax 内容时运行。上面的代码检查您的id="tabTree" 是否在加载的内容中，如果是并且树尚未构建，则构建它。

【讨论】：