2

ここで本当に基本的なことが欠けていると思うので、正しい方向に向けてください!

jquery mobile がページを読み込んでいますが、これに加えて、各ページにページのセクションを読み込むセカンダリ ajax 呼び出しがあります。

最初のページロードは正常に機能し (ご想像のとおり)、ajax 呼び出しがロードされ、結果が正しい div に適用されます。ただし、サイトの別のページに移動すると、ajax 呼び出しが発生し、応答が返され、div を選択しますが、ajax 呼び出しの結果が div の html コンテンツに適用されません。これは少し奇妙です。

ヘッドで関数を呼び出すと、setupLogin()すべての pageinit で正しく起動します。

function setupLogin() {
console.log('calling my ajax...');
    var request = $.ajax({
        url: '/ajax-file.php',
        type: 'GET',
        dataType: 'html'
    });
    request.done(function(msg) {
console.log('got ajax result: '+msg);
        $('#page-header').html(msg); // <- this is doing nothing after initial pageload
var div = $('#page-header');         // <- so I added this line
console.log(div);                    // <- and this line to check it's grabbing the div ok
    });
}

$(document).delegate("body", "pageinit", function(event) {
    setupLogin();
});

コンソール ログの行は、期待どおりに出力されます。

console.log('got ajax result: '+msg)呼び出しの正しい出力をログに記録する/ajax-file.phpので、ajax 呼び出しが完全に機能していることがわかります。

console.log(div)ログ:

[div#page-header, context: document, selector: "#page-header", constructor: function, init: function, selector: ""…]
    0: div#page-header
    context: document
    length: 1
    selector: "#page-header"
    __proto__: Object[0]

これは、divが正しく検出され、エラーがまったく発生しないことを意味すると思います。行内ののmsghtml コンテンツに追加されていないのコンテンツを除いて、すべてが正常に読み込まれます。$('#page-header')$('#page-header').html(msg);

jqueryがページをロードする方法と関係があると思いますか? $('#page-header').html(msg);新しいページをDOMにロードする前に、前のページに行を適用できますか? すべてが完全にロードされた後、どのようにこのイベントを発生させるのですか? 私はそれが何をしたと思ったpageinitのですか、それとも間違っていますか？

アップデート

@Brad M ajax レスポンスの内容は純粋な html です。

<div id="page-header-top">
    <div id="h_logo"><a><span id="redLogo"></span></a></div>
    <div id="h_login"><a href="/w/touch/banking"><span id="bankingBtn" class="">Banking</span></a></div>
    <div id="h_games"><a href="/w/touch/games/"><span id="allGamesBtn" class="">All Games</span></a></div>
    <div id="h_home"><a href="/w/touch/home"><span id="homeBtn" class=""></span></a></div>
</div>
<div id="page-header-bottom" class="small"><b>User Name &pound;0.00</b><a href="/?logout=true" data-ajax="false"><span class="logout-btn">Log out</span></a></div>
4

1 に答える 1

4

変化する：

$('#page-header').html(msg);

に:

$.mobile.activePage.find('#page-header').html(msg);

あなたの場合、ヘッダー コンテンツは最初のページに適用されています (まだ DOM 内にロードされています)。

于 2013-03-20T15:41:30.567 に答える