在部分视图中调用 jquery ajax 后，css 不会加载答案

【问题标题】：css won't load after jquery ajax call in partial view在部分视图中调用 jquery ajax 后，css 不会加载
【发布时间】：2012-10-18 02:00:46
【问题描述】：

每当用户单击按钮时，我都会尝试更改菜单的内容。 CSS 最初加载很好，但是一旦我按下按钮启动 ajax 调用，菜单栏就会返回，但没有应用任何 CSS。所有代码都在 MVC 4 局部视图中。

这是我的 JS

$(document).ready(function () {

    $("#menu").wijmenu({
        orientation: 'vertical'
    });

    $("#TDButtons a").click(function () {
        var href = $(this).attr("href");
        $('#menuAjax').fadeOut('slow', LoadAjaxContent(href));
        return false;
    });

    function LoadAjaxContent(href) {

        $.ajax(
            {
                url: href,
                success: function (data) {
                    $("#menuAjax").html(data).fadeIn('slow');
                }
            });

    }
});

这是导航标签

   <nav id="menuAjax">
        <ul id="menu">
            <li><a href="#">Breaking News</a>
                <ul>
                  ...

这是用于启动 AJAX 的按钮的 HTML

   <div class="navDiv">
        <div id="TDButtons">
            <a href="@Url.Action("_menu", "Home", new { TakeoutDelivery = "TakeOut" }, null)">
                <img class="headerLogo" src="../../Content/Images/TakeoutButton.jpg" alt="Take Out" /></a>
            <a href="@Url.Action("_menu", "Home", new { TakeoutDelivery = "Delivery" }, null)">
                <img class="headerLogo" src="../../Content/Images/DeliveryButton.jpg" alt="Delivery" /></a>
        </div>

如果您还需要什么，请告诉我。

【问题讨论】：

标签： css asp.net-mvc jquery

【解决方案1】：

把它放在页面上。

function pageLoad(sender, args) {
 $('#OutsideDiv').trigger('create');
}

这将在页面加载时重新附加 css。我认为的问题是它只是部分帖子，因此您正在丢失样式表。在进行部分回发调用时，我在 jquery-mobile 中的移动网站遇到了非常相似的问题。这修复了部分回发.....

注意：它的渲染延迟非常小...不确定这是否会给您带来问题....

希望对你有帮助

干杯罗宾

【讨论】：

【解决方案2】：

我需要添加

$("#menu").wijmenu({
    orientation: 'vertical'
});

进入 LoadAjaxContent 函数。

function LoadAjaxContent(href) {
    $.ajax({
        url: href,
        success: function(data) {
            $("#menuAjax").html(data).fadeIn('slow');
            $("#menu").wijmenu({
                orientation: 'vertical'
            });
        }
    });
}

【讨论】：