1

我正在通过 jquery 将网页标题的 HTML 注入 DOM（模拟母版页）。在标题中，我加载了一个名为jMenu的 jquery 导航菜单插件。我能够为标题注入 HTML，它似乎没有问题。加载后，我需要对 jMenu 进行 jquery 调用。

问题是看起来 jMenu 调用是在 DOM 完成更新之前进行的，并抛出一个错误，抱怨它找不到其中一个 html 元素。所以我试图延迟加载到 jMenu 但我认为调用现在甚至没有被执行，因为我的警报没有弹出。我已经对此进行了一些搜索，但无法使其正常工作。我猜这是一个小的语法问题。我尝试了几件事：

HTML：

<body>
<div class="mpheader"> 
    <div class="header"> <!-- start of injected html -->
    <br/><br/>
    <h1 style="text-align: center;">Reports</h1>
    <div class="centerControl">
        <ul id="jMenu">
        ...
    </div>               <!-- end of injected html -->
</div>

<div class="content">

    <h2>Welcome</h2>
    ...

JS：

$(document).ready(function () {

// Load Header
$.get( 
    "./header.jsp", 
    function(data) {
        $(".mpheader").html(data); 
    }
);

// Initialize Navigation Menu
$(".header").on("load", function() { /* doesn't get called */
    alert('called');
    $("#jMenu").jMenu();
})

$(".mpheader").on("load", function() { /* doesn't get called */
    alert('called');
    $("#jMenu").jMenu();
})

$(window).load(function(){   /* doesn't get called */
    alert('called');
    $("#jMenu").jMenu();        
})

//$("#jMenu").jMenu(); /* will cause error complaining about dom */

// TODO: Load Footer

});
4

2 回答 2

0

一旦你的 get 返回，你正在调用一个函数来填充你的标题的 html。之后您可以设置菜单。以下内容应该适合您：

$.get("./header.jsp", 
    function(data) {
        $(".mpheader").html(data);
        $("#jMenu").jMenu(); 
    }
);
于 2012-06-21T19:22:09.277 回答
0

试试这个：

$(document).ready(function () {
    // Load Header
    $.get( 
        "./header.jsp", 
        function(data) {
            $(".mpheader").html(data).trigger('loaded'); // Fire a custom event.
        }
    );

    // Initialize Navigation Menu - occurs when your custom event is fired.
    $(".mpheader").on("loaded", function() {
        $("#jMenu").jMenu();
    });
});

因为在这种方法中，您正在创建一个事件序列，该事件仅在您的 AJAX 调用完成并加载您的菜单项后才会触发。

于 2012-06-21T19:25:32.210 回答