簡體   English   中英

jQuery Mobile Ajax加載jsonp頁面更改后不起作用

[英]jQuery mobile ajax load jsonp not work after page change

我使用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');
        }
    });
});

有問題的頁面

目前的進展

我已經嘗試過Gajotres的回答,但仍然只能使用一次。 這些頁面是通過AJAX加載的。 我還檢查了其他頁面的HTML結構是否正確。 我仍然不知道為什么會這樣。

任何幫助將不勝感激。

在這種情況下不應該使用:

$(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時,它只會將其附加到當前活動的頁面。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM