jquery mobile pageinit没有看到div

Question

我想我在这里遗漏了一些非常基本的东西，所以请指出正确的方向！

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，而且我完全没有收到任何错误。一切正常，除了msg 的内容没有添加到$('#page-header').html(msg); 行中$('#page-header') 的html 内容中。

我认为这与 jquery 如何加载页面有关？在将新页面加载到 DOM 之前，是否可以将 $('#page-header').html(msg); 行应用于上一页？在这种情况下，我如何在一切都完全加载后触发这个事件？我以为那是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>

Answer 1

变化：

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

到：

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

在您的情况下，标题内容已应用于第一页（仍在 DOM 中加载）。