Question

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

jquery mobile正在加载我的页面，但除了每个页面上的这个，我还有一个辅助ajax调用，它会加载页面的一部分。

第一个页面加载工作正常（正如您所期望的那样），ajax调用加载并将结果应用于正确的div。然而，当我导航到我的网站上的另一个页面时，我的ajax调用触发，我得到一个响应，我选择div但是它没有将ajax调用的结果应用于div的html内容，我觉得有点奇怪。

我在头部调用setupLogin()函数，它在每个页面上都能正确触发：

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')行的$('#page-header').html(msg);的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);

到a：

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

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

jquery移动pageinit没有看到div

1 个答案: