如何等待一個要加載的元素才能應用JQuery功能

Question

我想申請一個jQuery tabs做一個動態加載的內容。問題是在加載容器之前應用了tabs函數，因此我看不到渲染的選項卡。調試我不能等待一段時間，它可以成功運行。

我的背景是一個主/細節網格，將細節顯示爲可展開的行。每次點擊一個網格行時，我都會通過ajax詢問詳細信息到另一個名爲mypage.aspx的頁面，並將收到的數據放到一個名爲contentDetail的div，這實際上是一個動態生成的tr。一旦獲得了數據，我想將tabs函數應用於mypage.aspx內容。

這裏是我的代碼：

var html = '<tr id="newRow"><td colspan="4"><div id="contentDetail"></div></td></tr>'; 

$('#mygrid tr').each(function() { 
    $(this).on('click', function() { 
     // I create a row on the fly and append it next to the clicked row 
     // ... 
     // I load the contents 
     $('#contentDetail').load('mypage.aspx #div1', { data: '123' }, function (response, status, xhr) { 
      if (status == "error") { 
       // ERROR 
      } 
     }); 
     // Here I want to apply the tabs 
     $('#contentDetail').ready(function() { 
      $('.tabs').tabs(); 
     }); 

    }); 

更新：

$.when($('#contentDetail').load('mypage.aspx #div1', { data: '123' }, function (response, status, xhr) { 
      if (status == "error") { 
       // ERROR 
      } 
     })).then($.getScript('Scripts/function.js')); 

function.js： $('#tabs').tabs();

Answer 1

我解決它使用else子句load回調函數：

if (status == "error") { 
    // Error 
} 
else { 
    // HERE THE CONTENT IS FULLY LOADED 
    $('#tabs').tabs(); 
} 

Answer 2

可以使用jQuery when/Deferred做到這一點：

$.when($('#contentDetail').load('mypage.aspx #div1')).then($('.tabs').tabs()); 

Answer 3

試試這個：

var html = '<tr id="newRow"><td colspan="4"><div id="contentDetail"></div></td></tr>'; 

    $('#mygrid tr').each(function() { 
    $(this).on('click', function() { 
     // I create a row on the fly and append it next to the clicked row 
     // ... 
     // I load the contents 
     $('#contentDetail').load('mypage.aspx #div1', { data: '123' }, function (response, status, xhr) { 
      if (status == "error") { 
       // ERROR 
      } 
      if(status == "success"){ 
       // Here I want to apply the tabs 

      $('.tabs').tabs(); 

       } 

     }); 


    }); 
});