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

Question

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

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

在我的内部选项卡面板中加载内容（因为内部选项卡稍后在DOM中添加（因此，$('.inner_tabs')甚至无法识别）。我知道通常使用{{3}修复此问题jQuery的方法。但是我怎样才能将它应用到我目前的情况？如何将.on()与jQuery EasyUI的onSelect回调一起使用？

Answer 1

在内部标签添加到DOM后，您需要重新初始化ajax请求的success回调中的内部标签。

你可以这样做：

$('#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;
               }
         });

   });
    }       
});