Question

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

Before I hit the button

After I hit the button

这是我的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>

如果您还有其他需要，请告诉我。

Answer 1

把它放在页面上。

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

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

注意：渲染的延迟非常小......不确定这对你来说是否有问题....

希望有所帮助

干杯罗宾

Answer 2

我需要添加

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

进入LoadAjaxContent函数。

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

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

2 个答案: