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，并且我完全没有错误。一切都加载正常，除了内容msg没有添加到行中的 html 内容$('#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 回答