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挂一些浏览器

回答

相关问题