jquery mobile pageinit не видел div

Question

Я думаю, что мне не хватает чего-то действительно элементарного здесь, поэтому, пожалуйста, укажите мне в правильном направлении!

jquery mobile загружает мои страницы, но в дополнение к этому на каждой странице у меня есть вторичный вызов ajax, который загружает раздел страницы.

Первый pageload работает отлично (как и следовало ожидать), вызов ajax загружает и применяет результаты к правильному div. Однако, когда я перехожу к другой странице на моем сайте, мой вызов ajax срабатывает, я получаю ответ, я выбираю div, но он не применяет результат вызова ajax к содержимому html div, который я нахожу немного странным.

я вызываю функцию 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, или я ошибаюсь?

UPDATE

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).