jQuery的動態內容與圖像不能正確加載/呈現在IE8/9

我創建了一個網上商店。有不同類別的產品。我正在使用jQuery選項卡顯示這些類別。每個類別選項卡列出該類別下的產品。我正在使用jQuery動態創建類別選項卡和內容。我也使用jQuery NailThumb來即時生成縮略圖。網址是：jQuery的動態內容與圖像不能正確加載/呈現在IE8/9

http://www.thekclonghorns.com/TeamStore/Store.aspx

的網頁可以正確顯示在除IE8和IE9所有的瀏覽器。在我遍歷所有選項卡後，它在IE8和IE9中顯示正常。

顯示商店的代碼如下。任何想法，爲什麼這不在IE中正確呈現？

謝謝！

$(document).ready(function() { 

    setupPage(); 

}); 

function setupPage() { 
    showProgress(); 
    clearProducts(); 

    setupCategories(); 
} 

function setupCategories() { 
    loadingCount++; 

    GetCategories([], true, 
    { 
     successCallback: function (data) { 
      if ((data) && (data != null) && (data.length > 0)) { 
       setupProducts(data); 
      } 

      data = null; 
     }, 
     errorCallback: function (httpRequest, status, error, functionName) { 
      httpRequest = null; 
      status = null; 
      error = null; 
      functionName = null; 
     }, 
     completeCallback: function() { 
      loadingCount--; 
      checkLoading(); 
     } 
    }); 
} 

function setupProducts(categories) { 
    GetProducts([], true, 
    { 
     successCallback: function (data) { 
      if ((data) && (data != null) && (data.length > 0)) { 
       buildCategoryDisplay(categories, data); 
      } 

      data = null; 
     }, 
     errorCallback: function (httpRequest, status, error, functionName) { 
      httpRequest = null; 
      status = null; 
      error = null; 
      functionName = null; 
     }, 
     completeCallback: function() { 
      loadingCount--; 
      checkLoading(); 
     } 
    }); 
} 

function buildCategoryDisplay(categories, products) { 
    var content = []; 
    var category; 
    var product; 
    var totalCols = 4; 
    var limit = 0; 

    content.push("<div id=\"tabs\">"); 
    content.push("<ul>"); 

    for (var i = 0; i < categories.length; i++) { 
     category = categories[i]; 
     if (category.IsActive) { 
      content.push("<li><a href=\"#tabs-" + category.Id + "\">" + category.Name + "</a></li>"); 
     } 
    } 
    content.push("</ul>"); 

    for (var i = 0; i < categories.length; i++) { 
     category = categories[i]; 
     if (category.IsActive) { 
      content.push("<div id=\"tabs-" + category.Id + "\">"); 
      content.push("<h4>" + category.Name + "</h4>"); 
      //get the list of products for this category and display them with links to details page 
      if (products != null && products.length > 0) { 
       content.push("<table cellspacing=\"0\" cellpadding=\"0\" rules=\"none\" border=\"0\" class=\"modal_page_form\" style=\"width: 540px; margin: 4px;border-collapse: collapse; margin-bottom: 0px;\">"); 
       content.push("<tr>"); 
       for (var j = 0; j < products.length; j++) {      
        product = products[j]; 
        if (product.Category.Name == category.Name) { 
         limit = limit + 1; 
         content.push("<td><a href=" + pageLocation + "TeamStore/StoreProductDetails.aspx?ProductId=" + product.Id + ">"); 
         if (product.HasPhotos) { 
          content.push("<div class=\"nailthumb-container\" href=" + pageLocation + "Uploads/" + product.Photos[0].ImagePath.replace(/ /gi, "%20") + "><img src=" + pageLocation + "Uploads/" + product.Photos[0].ImagePath.replace(/ /gi, "%20") + "></img></div>"); 
         } 
         else { 
          content.push("<div class=\"nailthumb-container\" href=" + pageLocation + "Uploads/no-img.jpg><img src=" + pageLocation + "Uploads/no-img.jpg></img></div>"); 
         } 
         content.push("<br/><br/><p>" + product.Title + "<br/>$" + product.Cost + "</p>"); 
         content.push("</a></td>"); 
         if (limit == totalCols) { 
          content.push("</tr><tr>"); 
          limit = 0; //reset limit 
         } 
        } 
       } 
       limit = 0; 
       content.push("</tr></table>"); 
      } 

      content.push("</div>"); 
     } 
    } 

    content.push("</div>"); 

    $("#productsContainer").replaceHtml(content.join("")); 
    $("#productsContainer").show(); 
    $(".nailthumb-container").nailthumb({ width: 100, height: 100, fitDirection: 'top left' }); 

    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
    $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 

    content = null; 
    category = null; 
    product = null; 
    totalCols = null; 
    limit = null; 
} 


function clearProducts() { 
    $("#productsContainer").replaceHtml("").hide(); 
}

來源

2013-01-08 user1100221