Question

我有一个网页，只有纯HTML，CSS和Jquery的完整Javascript以及一些Jquery UI效果。问题是，在网页的某些位置和某些动画中，页面挂起在Chrome 13和Explorer 8上;在Firefox 4/5/6中，该页面工作得非常完美。（仅在这些浏览器上测试）

以下是主要的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控件（将accordion属性分配给父div）;在这种情况下，浏览器（Explorer，Chrome）甚至没有构建UI，只是挂起显示没有内容。

请有人能告诉我这里发生了什么吗？我之前从未遇到过像Jquery这样的问题。

感谢。

PD：我正在使用最新版本的Jquery和Jquery UI：

Jquery：1.6.2
Jquery UI：1.8.14

Answer 1

我找到了这种行为的原因，我忘了提到我正在使用jsTree构建屏幕左侧的菜单，并且不知何故jsTree与JQuery UI库冲突导致此浏览器崩溃。

作为建议，我建议谨慎使用jsTree;在我的特定情况下，我使用DynaTree，这不会导致冲突。希望这可以帮助其他人。

Jquery UI挂起了一些浏览器

1 个答案: