Javascript jQuery移动ajax加载jsonp在页面更改后不工作

我用jQuery手机制作了一个手机网页。我在页面加载中使用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');
        }
    });
}); 

每次添加内容时，它都会被添加到第一页的推文中，这只会将其添加到当前活动的页面。

解决方案 在这种情况下不应使用：

$(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');
        }
    });
}); 

---

每次你添加内容时，它都会被添加到第一页的推文中，这只会将其添加到当前活动的页面。

我尝试了你的建议，但不幸的是，它只工作了一次。请尝试这一行：$document.on'pagebeforeshow'，'data role=page'，function{谢谢Gajotres！它可以工作。在此之前，我以为页面更改后第一个页面已从DOM中删除。我尝试了您的建议，但不幸的是，它只工作了一次。请尝试以下行：$document.on'pagebeforeshow'，'data role=page'，function{谢谢Gajotres！它可以工作。在此之前，我认为在页面更改后，第一个页面已从DOM中删除。贝娄您将找到解决问题的方法，我已下载您的页面并亲自测试。贝娄您将找到解决问题的方法，我已下载您的页面并亲自测试。