jQuery Вкладки EasyUI внутри вкладок и Ajax

Question

Предположим, у меня есть некоторые jQuery EasyUI tabs в некоторых других вкладках. Внутренние вкладки загружаются через Ajax при щелчке по внешней вкладке. При щелчке по внутренней вкладке я хочу загрузить некоторый контент через Ajax внутри панели внутренних вкладок. У меня есть проблема в том, что, поскольку внутренние вкладки загружаются с помощью Ajax, я не могу использовать это:

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

для загрузки содержимого в моей внутренней вкладке панели (поскольку внутренние вкладки добавлены позже в DOM (Так, $('.inner_tabs') даже не признается). Я знаю, что обычно эта проблема решена с помощью .on() метода JQuery. Но как я могу применить это к моей нынешней ситуации? Как я могу использовать .on() с onSelect обратного вызова JQuery EasyUI?

Answer 1

вас необходимо повторно инициализировать внутренние вкладки в обратном вызове success запроса ajax после t внутренние вкладки добавлены в 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; 
       } 
     }); 

    }); 
    }  
});