Jquery UI菜单奇怪的行为

Question

我在MVC 4应用程序中使用Jquery UI Menu插件时遇到问题。

我有一个简单的html，里面有空元素，应该填充文件.ready事件。嗯，这发生了但是从ajax回来之后html看起来很奇怪。在退回并尝试通过$("#myUl").html(valueFromTheAjax)我console.log()进行设置之前。

当应用$("#myUl").html(valueFromTheAjax)时，html看起来很奇怪（就像一个破碎的CSS），但是当我从控制台复制值并手工粘贴到html中时，一切都很完美。

这是我的HTML：

<div id="categories-menu-wrapper" style="width:203px; height:300px; border:2px solid; float:left">
  <ul id="menutomi" class="ui-menu" style="width:200px;height:auto;">


  </ul>
</div>
<div id="preview-wrapper" style="width: 100%; height: 300px; border: 2px solid;">
</div>

这是我的javascript：

$(document).ready(function () {
        $.ajax({
            url: "http://localhost:49833/api/Categories",
            type: "GET",
            dataType: "json",
            crossOrigin: true,
            contentType: "application/json; charset=UTF-8",
            success: function (data) {
                $("#menutomi").append(UXManagement.LoadAllCategories(data));
            },
            error: function (e) {
                alert("Error");
                alert(JSON.stringify(e));
            }
        })
    })

和html格式：

UXManagement.CategoriItemTemplate = "<li><a class=\"delete-cat\" data=\"http://localhost:49833/api/Categories?categoryId={{CAT_ID}}\"><img title=\"Delete category\" src=\"Content/Images/delete-icon.png\"/></a><a class=\"add-product\" data=\"http://localhost:49833/api/Products?categoryId={{CAT_ID}}\"><img title=\"Add product\" src=\"Content/Images/add-new-icon.jpg\" /></a>{{CATEGORY_TITLE}}<ul>{{NESTED_UL}}</ul></li>";
    UXManagement.ProductItemTemplate = "<li><a class=\"delete-product\" data=\"http://localhost:49833/api/Products?productId={{PROD_ID}}&categoryId={{CAT_ID}}\"><img title=\"Delete Product\" src=\"Content/Images/delete-icon.png\" /></a><a class=\"product-item\" data=\"http://localhost:49833/api/Products/ProductById/{{PROD_ID}}\">{{PRODUCT_NAME}}</a></li>";

UXManagement.LoadAllCategories      = function (data) {

        var categoryHtml = [];

        $.each(data, function (i, elem) {

            var productsHtml            = [];
            $.each(elem["Products"], function (i, product) {
                var replaceValue = UXManagement.ProductItemTemplate.replace(/{{PROD_ID}}/g, product["Identifier"])
                                                                    .replace(/{{CAT_ID}}/g, elem["Id"])
                                                                    .replace(/{{PRODUCT_NAME}}/g, product["Name"]);

                productsHtml.push(replaceValue);
            })

            var wholeReplaceInCategory  = UXManagement.CategoriItemTemplate.replace(/{{CAT_ID}}/g, elem["Id"])
                                                                    .replace(/{{CATEGORY_TITLE}}/g, elem["Name"])
                                                                    .replace(/{{NESTED_UL}}/g, productsHtml.join(""));

            categoryHtml.push(wholeReplaceInCategory);
        })


        console.log(categoryHtml.join(""));
        return categoryHtml.join("");
    }

如果有人能提供帮助会很棒，因为我觉得很难处理它。谢谢！

修改