1

jqueryを介してWebページのヘッダーのHTMLをDOMに挿入しています（マスターページをシミュレートします）。ヘッダーに、 jMenuというjqueryナビゲーションメニュープラグインをロードします。ヘッダーにHTMLを挿入できますが、問題はないようです。それがロードされた後、jMenuをjqueryで呼び出す必要があります。

問題は、DOMの更新が完了する前にjMenu呼び出しが行われているように見え、html要素の1つが見つからないというエラーをスローすることです。そのため、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 に答える