Aqui está o cenário: eu tenho um script menubar.js, que, quando a página é carregada, consulta o servidor em busca de permissões do usuário e cria uma barra de menus com base neles. fragmento de código

$(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);
                }
            });
}

Este script está incluído em todas as minhas página
Agora, eu gostaria de marcar o<li> representando a página atual com uma classe 'atual'
Eu já adicioneivar currentPage no meu script menubar.js e em cada página (por exemplo, em reportsPage.js):

$(function() {

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

e no menubar.js: uma função que é chamada em 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');
}

o log que recebo é:

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

parece que o elemento que estou procurando ainda não foi adicionado ao DOM.
Acho que deveria haver alguma solução usandolive(), mas quando eu tentolive('load',...) nunca é chamado ...