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

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

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

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


jquery ajax jquery-easyui
person user765368    schedule 21.03.2013    source источник
comment
@ukung, ответ Сайгиты кажется правильным. Вам нужно повторно инициализировать вкладки после завершения запроса ajax, что и достигается их ответом. Есть ли у вас проблемы с этим?   -  person Cave Johnson    schedule 21.03.2017
comment
Можете ли вы поделиться кодом, где вы делаете свой запрос ajax?   -  person shramee    schedule 27.03.2017

Ответы (1)


arrow_upward
3
arrow_downward

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

   });
    }       
});
person Saigitha Vijay    schedule 22.03.2013