如何在document.ready上操作在document.ready上创建的元素 [英] how to manipulate, on document.ready, elements which were created on document.ready

问题描述

这里是场景:我有一个menubar.js脚本，该脚本在页面加载时向服务器查询用户的权限，然后基于它们创建菜单栏.代码段:

Here's the scenario: I have a menubar.js script, which, when the page loads, queries the server for user's permissions, and then creates a menubar based on them. code snippet:

$(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中):

This script is included in all my pages.
Now, i'd like to mark the <li> representing the current page with a 'current' class.
I've added var currentPage to my menubar.js script, and on each page (for example, in reportsPage.js):

$(function() {

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

和menubar.js中:在document.ready上调用的函数:

and in menubar.js: a function which is called on 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',...)时，它永远不会被调用...

so it appears that the element i'm looking for hasn't been added to the DOM yet.
I think there should be some solution using live(), but when I try live('load',...) it never gets called...

推荐答案

我针对该问题的解决方案是生成读取如下内容的JavaScript:

My solution for the problem was to generate JavaScript which reads:

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

我所有的URL都是绝对的，还是相对于BASE_URL的.这样，我可以简单地查找所有指向当前页面的链接，并为它们添加当前"类(获取当前页面的URL，将BASE_URL切掉，然后使用结果字符串查询a[href="..."]

All my URLs are either absolute or relative to BASE_URL. That way, I can simply look for all links which go to the current page and add the class "current" to them (take the URL for the current page, cut BASE_URL away and use the resulting string to query for a[href="..."]

对于您的解决方案，我认为问题在于页面加载后运行SetCurrentPage()，而您应该在加载菜单" AJAX调用返回后调用该页面.

For your solution, I think the problem is that you run SetCurrentPage() after the page has loaded when you should call it after the "load menu" AJAX call has come back.

将对这两个方法的调用移动到InitializeCurrentUser()中的成功回调的末尾，它应该可以工作.

Move the calls to the two methods to the end of the success callback in InitializeCurrentUser() and it should work.

这篇关于如何在document.ready上操作在document.ready上创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！