1 
$('#home').live('pageshow', function(event) {
    $.mobile.showPageLoadingMsg();
    var task = getUrlVars()["que"];
    var page = getUrlVars()["page"];
    var query = '';
    if(page == undefined){
        page = 0;
    }
    var nextPage = page+1;
    if(task == undefined){
        task = 'home';      
    }
    switch(task){
        case 'home':
            query = 'task=home&page='+page;
            break;
    }
    $.get('http://myappserver.com/api.php?'+query,function(data,response){
        alert(response);
        alert(data);
        var json = eval(data);
        var list = '';
        for (var i=0;i<json.length;i++){
            var item = json[i];
            var img = 'http://myappserver.com'+item.img;
            list += '<li><a href="page.html?id=' + item.id + '">' +
                        '<img src="' + img + '" class="recipeAvatarList"/>' +
                        '<h4>' + item.value + '</h4>' +
                        '<p>' + item.familia + '</p>' +
                        '<span class="ui-li-count">' + item.votos + '</span></a>';
                 +'</li>';
        }
        list += '<li><a href="index.html?que='+task+'&page='+nextPage+'">Cargar más..</a></li>';
        $('#mainlist').html(list).listview('refresh');
        $.mobile.hidePageLoadingMsg();
    });  

});

在哪里

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

这似乎很有效，可以在第一页中加载结果，但是如果您注意到，我会附加一个链接来加载下一页：

list += '<li><a href="index.html?que='+task+'&page='+nextPage+'">Cargar más..</a>

问题是，当单击该链接时，它会正确加载下一个 URL，并且数据和响应警报具有预期的内容，但未填充列表...用户必须手动刷新该视图才能这样做..

这是因为我不应该使用 .live('pageshow')吗？

-编辑-

页面标记是这样的

<div id="home" data-role="page" >     
                <header role="banner" class="clearfix" >        
                    <h1>Title</h1>       
                </header>
                <div data-role="content">
                        <div class="">
                            <input type="search" id="buscar_receta" placeholder="busca recetas" />
                                <a href="search.html" class="advancedSearchLink">+ Busqueda avanzada</a>
                        </div>
                </div>
                <div data-role="content">
                    <ul id="mainlist" data-role="listview" >

                    </ul>

                </div>        
</div>
4

2 回答 2

0

问题是你所说的：你不应该使用$.livejQueryMobile（除非你真的必须）。

尝试从此更改您的代码： 

$('#home').live('pageshow', function(event) {
    //your code here
}

对此：

$('#home').on('pageshow', function(event) {
    //your code here
}

说明：页面默认由 jqMobile 使用 ajax 加载，因此新内容将添加到现有 DOM。如果使用$(#home).live('pageshow', ...)，相当于$(#home).on('pageshow', 'html', ...)，则要求HTML 元素侦听pageshow事件。

每次您再次（通过 ajax）加载同一个页面时，事件绑定都会再次完成到同一个 HTML 元素，并且您的代码会执行两次，然后是 3 次，然后是 4 次......

您可能想在那里阅读这个相关问题和我的答案：JQueryMobile 听点击

更新：

对不起！我在注意到你的评论之前回答了。您的代码中存在问题，因为您使用的是live代替，但您的主要问题是您打开链接的方式：每次单击时on它都会创建第二个，并且您的重复列表中的第一个可能正在正确更新，但是你在屏幕上有第二个空的网格。<div id='home'>

您必须对加载数据的方式进行一些更改才能使其正常工作。请阅读我在您的问题中的评论。

于 2012-12-29T14:35:59.167 回答
0

.live是一种已弃用的方法。所以尝试使用以下...

$('#home').on('pageshow', function(event) {

}

或者你可以使用

$('#home').delegate('pageshow', function(event) {

}

参考这里

于 2012-12-29T14:43:41.627 回答