Jquery UI掛一些瀏覽器

我有一個純粹的HTML，CSS和完整的Javascript與JQuery和一些JQuery UI的影響的網頁。問題是，在網頁的某些地方和某些動畫，頁面掛在Chrome 13和Explorer 8上;在Firefox 4/5/6中，該頁面的工作原理非常完美。（只在這些瀏覽器測試）Jquery UI掛一些瀏覽器

這裏是主要的HTML頁面：

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div id="upperContent"></div> 
     <div id="downContent" class="noDisplay"> 
      <div id="closeContent"> 
       <img src="@Url.Content("~/Content/images/icons/closebox.png")" alt="X" /> 
      </div> 
      <div id="pageContent"> 
       @*Here goes the content*@ 
      </div> 

     </div> 
     @*Main screen content*@ 
     <div id="downContent_Main"> 
      <div id="welcomeMessage_Main" class="gradient"><h3><span></span>Welcome</h3></div> 
      <div id="newsTitle_Main">News</div> 
      <div id="newsBlocks_Main"> 
       @*here goes the news divs*@ 
      </div> 
     </div> 
    </div> 
</div>

這些都是風格：

#contentwrapper 
{ 
    float: left; 
    width: 100%; 
    height: 480px; 
} 

#contentcolumn 
{ 
    margin-left: 270px; /*Set left margin to LeftColumnWidth*/ 
    height: 480px; 
} 

/* Breadscrumb */ 
#upperContent 
{ 
    height: 20px; 
    padding-left: 3px; 
} 

/* Option content */ 
#downContent 
{ 
    height: 450px; 

    margin-top: 5px; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

#pageContent 
{ 
    padding-left: 8px; 
    padding-right: 8px; 
    background: inherit; 
    height: 428px; 

    overflow: auto; 
} 

#closeContent 
{ 
    height: 18px; 
    padding-top: 2px; 
    padding-right: 3px; 
    text-align: right; 
} 

#closeContent img 
{ 
    width: 16px; 
    height: 16px; 
    cursor: pointer; 
} 

/* Main screen content */ 
#welcomeMessage_Main 
{ 
    margin: 10px 10px 0px 10px; 
    height: 30px; 
} 

#newsTitle_Main 
{ 
    margin: 5px 10px 0px 10px; 
    height: 25px; 
    border: 1px solid #000000; 
    border-bottom: 0px; 

    padding: 3px 2px 0 5px; 

    font-size: 12px; 
    font-weight: bold; 
    font-family: normal Arial, sans-serif; 
    color: #FFFFFF; 
} 

#newsBlocks_Main 
{ 
    margin: 0px 10px 5px 10px; 
    height: 360px; 
    border: 1px solid #000000; 

    overflow: auto; 
}

的問題是，當在運行時我添加新內容的一些使用jQuery的容器：

$.ajax({ 
     url: pathSite, 
     success: function (data) { 

      //parse string data to XML 
      var xmlData = $.parseXML(data); 

      var innerDivs = ''; 

      //read XML resultant 
      $(xmlData).find('news').each(function() { 
       var headText = $(this).find('header').text(); 
       var imageText = $(this).find('image').text(); 
       var contentText = $(this).find('content').text(); 

       //trim the text to the maximum allowed on the current container 
       if (contentText.length > 205) { 
        contentText = contentText.substring(0, 205); 
       } 

       //concatenate the resulting news divs 
       innerDivs += ('<div class="newsContainer"><div class="newsImage">' + '<img src="' + pathSite + 'Content/images/news/' + imageText + '" alt="NewsImage" />' + '</div><div class="newsContent"><b>' + headText + '</b><br/>' + contentText + '</div></div>'); 
      }); 

      //add the html content 
      $('#newsBlocks_Main').html(innerDivs); 

      //hide loading animation 
      $('#newsBlocks_Main').hideLoading(); 

//Make the parent div sortable <- HERE IS THE ISSUE, NO MATTER WHERE I INITIALIZE THE SORTABLE PROPERTY: HERE OR AT DOCUMENT.READY 
      $('#newsBlocks_Main').sortable(); 
     }, 
     async: true 
    });

正如你可以在前面的代碼塊結束時看到的，我是試圖使用Jquery UI添加新內容SORTABLE，將屬性分配給父包含器div。內容在瀏覽器上構建得很好，但是當我嘗試拖動其中一個新添加的div時，瀏覽器掛起（Explorer，Chrome），但是在Firefox中它運行得非常漂亮。

相同的情況下，例如，我嘗試使動態添加div ACCORDION控制（分配手風琴屬性的父div）;在這種情況下，瀏覽器（資源管理器，Chrome）甚至沒有構建UI，只是掛起顯示沒有內容。

請有人可以給我一個關於這裏發生的事情的線索嗎？我以前從來沒有像Jquery這樣的問題。

謝謝。

PD：我使用jQuery和jQuery UI的最新版本：

jQuery的：1.6.2
jQuery用戶界面：1.8.14

來源

2011-08-18 lidermin

設置$ .ajax參數屬性「async：false」是否有所作爲？ – dgvid

努普，我試過了，一樣的行爲。 – lidermin

我發現的原因這種行爲，我忘了提及我正在使用jsTree構建屏幕左側的菜單，並且jsTree與JQuery UI庫衝突導致此瀏覽器崩潰。

作爲一個建議，我建議慎重使用jsTree;在我的特殊情況下，我使用DynaTree，它不會引起衝突。希望這可以幫助別人。

來源

2011-08-18 17:05:29 lidermin

嘿，謝謝一堆 –

Jquery UI掛一些瀏覽器

回答

相關問題