в jQuery загрузить мобильный AJAX, не JSONP в работе после смены страницы


Я создал мобильную веб-страницу с помощью jQuery Mobile. Я загружаю твиты с помощью метода jQuery .ajax() При загрузке страницы. Это работает, но когда я изменяю страницу, нажав на ссылку, твиты больше не загружаются.

Вот HTML:

<ul data-role="listview" data-divider-theme="c" data-inset="true" id="tweets">
    <li data-role="list-divider">Latest Tweets</li>
</ul>

Javascript:

$(document).bind('pageinit',function(){
    $.ajax({
        url:'https://api.twitter.com/1/statuses/user_timeline/LicsonLee.json',
        dataType:'jsonp',
        success:function(data){
            $.each(data,function(i){
                if(i < 5){
                    var tweet = data[i];
                   $('#tweets').append($('<li/>').html('<a href="https://twitter.com/'+tweet.user.screen_name+'/status/'+tweet.id_str+'" data-rel="external"><h4>'+tweet.text+'</h4><p>at '+tweet.created_at+'</p></a>'));
                 }
            });
            $('#tweets').listview('refresh');
        }
    });
});

Страница с проблемой

Текущий прогресс

Я пытался ответить на вопрос Гаджотреса, но он все еще работал только один раз. Страницы загружаются через AJAX. Я также проверил, что другие страницы структура правильная. Я до сих пор не могу понять, почему это произошло.

Любая помощь будет оценена по достоинству.
1 2

1 ответ:

Решение

Это не должно использоваться в данном случае:

$(document).bind('pageinit',function(){

Он сработает только один раз, вместо этого следует использовать:

$(document).bind('pagebeforeshow',function(){

Правка:

Это должно сделать:

$(document).on('pagebeforeshow', '[data-role="page"]', function(){   

Если вы хотите узнать больше об этом взгляните на мой Статья, чтобы быть более прозрачным, это мой личный блог. Или его можно найти здесь.

Правка 2:

Это решение работает:

$(document).on('pageshow',function(){
    $.ajax({
        url:'https://api.twitter.com/1/statuses/user_timeline/LicsonLee.json',
        dataType:'jsonp',
        success:function(data){
            $('#tweets *:not([data-role=list-divider])').remove();
            $.each(data,function(i){
                if(i < 5){
                    var tweet = data[i];
                    $.mobile.activePage.find('#tweets').append($('<li/>').html('<a href="https://twitter.com/'+tweet.user.screen_name+'/status/'+tweet.id_str+'" data-rel="external"><h4>'+tweet.text+'</h4><p>at '+tweet.created_at+'</p></a>'));
                }
            });
            $.mobile.activePage.find('#tweets').listview('refresh');
        }
    });
}); 

Каждый раз, когда вы добавляли содержание оно было приложено к #tweets на первой странице он будет добавлен только к текущей активной странице.