Question

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

问题是看起来在DOM完成更新之前正在进行jMenu调用并且抛出错误抱怨它无法找到其中一个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

});

Answer 1

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

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

Answer 2

试试这个：

$(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调用完成后才会触发事件，并加载你的菜单项。

jquery需要延迟调用插件

2 个答案: