选项卡和 Ajax 中的 jQuery EasyUI 选项卡答案

【问题标题】：jQuery EasyUI tabs within tabs and Ajax选项卡和 Ajax 中的 jQuery EasyUI 选项卡
【发布时间】：2013-03-10 08:37:33
【问题描述】：

假设我在其他一些标签中有一些jQuery EasyUI tabs。单击外部选项卡时，内部选项卡通过 Ajax 加载。单击内部选项卡时，我想通过 Ajax 在单击的内部选项卡的面板中加载一些内容。我遇到的问题是，因为内部选项卡是通过 Ajax 加载的，所以我不能使用这个：

$('.inner_tabs').tabs({
    onSelect: function(title, index){                           
        // do stuff
    }       
});

在我的内部选项卡面板中加载内容（因为内部选项卡是稍后在 DOM 中添加的（所以，$('.inner_tabs') 甚至无法识别）。我知道通常这个问题可以通过使用 jQuery 的 .on() 方法解决. 但是我如何将它应用到我目前的情况呢？如何将.on() 与jQuery EasyUI 的onSelect 回调一起使用？

【问题讨论】：

@ukung，Saigitha 的回答似乎是正确的。您需要在 ajax 请求完成后重新初始化选项卡，这就是他们的答案所完成的。你有什么问题吗？
你能分享你做ajax请求的代码吗？

标签： jquery ajax jquery-easyui

【解决方案1】：

您需要在 ajax 请求的success 回调中重新初始化内部选项卡将内部选项卡添加到 DOM。

你可以这样做：

$('#outer_tabsid').tabs({
    onSelect: function(title, index){                           
    $.ajax({type: "POST",
       url: "ajaxurl.jsp?param="+index,                    
       success: function (response) {
       var innertabid='innerTab'+index;
       $('#outer_tabsid').tabs('add',{  
             title:'New Tab',  
             content:'<div id="'+innertabid+'" class="easyui-tabs" style= "width:500px;    height:250px;">',
          });
          $('#'+innertabid).tabs({
              onSelect: function(title1, index1){
                  // ajax call to load the selected innertab;
               }
         });

   });
    }       
});

【讨论】：