Ajax調用後jQuery UI選項卡不工作

我有一張地圖上有幾個標記。點擊標記時，關於該特定標記的信息將被加載到信息框中。加載的信息分爲信息，文件和財務三大類。Ajax調用後jQuery UI選項卡不工作

爲了方便瀏覽這3個類別，我使用jQuery UI選項卡在類別之間切換。信息框中的所有內容都是使用jQuery構建的。原因在於信息框可以採用任何類型的信息，而不僅僅是在點擊其中一個標記時填充。

要填充此信息框，我使用Ajax。在ajax調用之後，我會調用jQuery選項卡。第一次點擊標記並填充框時，它工作正常。然而，第二個去，它什麼都不做。它只是在那裏顯示我的項目清單。

這裏是我的代碼：

function getinfo(id) { 
    $.ajax({ 
     url: "view/"+id, 
     type: "post", 
     beforeSend: function() { 
      $('#info').html("<img src='../img/loading.gif' style='padding:20px'/>"); 
      $('#info').css('text-align','center'); 
     }, 
     success: function(data) { 
      $('#info').css('text-align','left'); 
      data = JSON.parse(data); 
      var tabs = $('<ul></ul>').append(
       $('<li></li>').append($('<a></a>').attr('href','#information').text('Information'))).append(
       $('<li></li>').append($('<a></a>').attr('href','#documents').text('Documents'))).append(
       $('<li></li>').append($('<a></a>').attr('href','#financial').text('Financial')) 
      ); 

      var information = $('<table></table>').attr({ 
       cellpadding : 0, 
       cellspacing : 0, 
       width  : '298px', 
       id   : 'information' 
      }); 
      var documents = $('<table></table>').attr({ 
       cellpadding : 0, 
       cellspacing : 0, 
       width  : '298px', 
       id   : 'documents' 
      }); 
      var financial = $('<table></table>').attr({ 
       cellpadding : 0, 
       cellspacing : 0, 
       width  : '298px', 
       id   : 'financial' 
      }); 

      $.each(data.Clinic,function(index, value) { 
       if(index == 'street_address') value = value.replace(/UNAVAILABLE,/g, "").replace(/,/g, "<br/>"); 
       if(index == 'id') return true; 
       var row = $('<tr></tr>'); 
       row.append($('<td></td>').html('<b>' + index.ucwords() + '</b>')).append($('<td></td>').html(value)); 
       information.append(row); 
      }); 

      if(data.doccount > 0) { 
       var row = $('<tr></tr>'); 
       $.each(data.docs,function(index,value) { 
        var divClass = fileObject[value.ext] != 'image' ? 'document-show infoimage' : 'document-show'; 
        row = $('<tr></tr>').append(
         $('<td></td>').append(
          $('<img>').attr('src','../img/icon/file_extension_' + value.ext + '.png') 
         ).append(
          $('<a></a>').attr('href','Documents/' + value.real).addClass(divClass).text(value.name) 
         ) 
        ); 
        documents.append(row); 
       }); 
      } 
      financial.append(
       $('<tr></tr>').append(
        $('<td></td>').append(
         $('<a></a>').attr(
          'href','../clinics/profile/'+data.view.id 
         ).html(
          'View Financial Data' 
         ) 
        ) 
       ) 
      ); 

      $('#info').html(tabs).append(information).append(documents).append(financial); 
     }, 
     complete : function(e){ 
      $('#info').tabs(); 
     } 
    }); 
}

這是結果：

第一個電話後 -

enter image description here

如果我點擊另一個標記 -

enter image description here

來源

2014-02-11 Albert

是否有任何理由爲什麼jQuery'.tabs（）'調用在一個完整的函數中，而不僅僅是在成功函數的末尾？ – ToastyMallows

在成功功能和完整功能中試用了它。他們完全一樣。我最初的想法是'.tabs（）'在信息框被填充之前被調用，因此我爲什麼移動它。 – Albert

您是否在使用新標籤填充'＃info'之前嘗試過'destroy'方法？（[Documentation]（http://api.jqueryui.com/tabs/#method-destroy））或填寫新選項卡後刷新？（[鏈接]（http://api.jqueryui.com/tabs/#method-refresh）） – Raidri

當您用新的html填充#info div時，您不會重置屬於div的數據屬性。這些數據屬性存儲標籤的狀態，並且在您將新標籤填入html時需要重置。

您可以使用destroy方法或refresh方法jquery-ui-tabs。（請參閱destroy和refresh的文檔。）

來源

2014-02-11 15:01:09 Raidri

Ajax調用後jQuery UI選項卡不工作

回答

相關問題