Question

这是一个场景：我有一个menubar.js脚本，当页面加载时，它会向服务器查询用户的权限，然后根据它们创建一个菜单栏。代码段：

$(function () {
    //initialize the header buttons according to user's permissions
    InitializeCurrentUser();
});

function InitializeCurrentUser() {
    //get current user
    $.ajax(
            {
                url: "../Login/LoginService.asmx/GetCurrentUser",
                success: function (result) {
                    var currentUserRoles = result.d;
                    output = '<ul class="Header">   ';
                    if ($.inArray("reports", currentUserRoles) > -1) {
                    output += '<a href="../Reports/Reports.aspx" ><li id="lnkReports">Reports </li></a>';
                    }
                    //etc...
                    console.log('generating menu');
                    $("#HeaderMenu").html(output);
                }
            });
}

此脚本包含在我的所有页面中现在，我想用'当前'类标记代表当前页面的<li> 我已将var currentPage添加到我的menubar.js脚本和每个页面上（例如，在reportsPage.js中）：

$(function() {

    //set this page as the current page; 
    currentPage = Enum.Page.Reports;
});

和menubar.js：在document.ready：

上调用的函数

function SetCurrentPage() {
    $("#HeaderMenu li").removeClass('current');
    var liElement = null;
    switch (currentPage) {

        case Enum.Page.Reports:
            liElement = $("#lnkReports");
            break;
    }

    console.log('adding a class to: ');
    console.log(liElement);
    liElement.addClass('current');
}

我得到的日志是：

> generating menu
> adding a class to: 
> []

所以看来我正在寻找的元素还没有被添加到DOM中我认为应该有一些使用live()的解决方案，但是当我尝试live('load',...)时，它永远不会被调用...

Answer 1

您在var

之前忘记了currentPage

$(function() {

    //set this page as the current page; 
   var  currentPage = Enum.Page.Reports;
});

确保在dom.ready事件

之后调用函数SetCurrentPage

Answer 2

我对此问题的解决方案是生成JavaScript，其内容为：

 var BASE_URL = 'http://server/app/...'

我的所有网址都是BASE_URL的绝对网址或相对网址。这样，我可以简单地查找转到当前页面的所有链接，并将类“current”添加到它们中（获取当前页面的URL，剪切BASE_URL并使用生成的字符串查询{ {1}}

对于您的解决方案，我认为问题是您在页面加载后运行a[href="..."]，而在“加载菜单”AJAX调用返回后应该调用它。

将调用移到两个方法到SetCurrentPage()成功回调的结尾，它应该有用。

如何在document.ready上操作在document.ready上创建的元素

2 个答案: