Question

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

});

WHERE

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>

Answer 1

你说的问题是：你不应该将$.live与jQueryMobile一起使用（除非真的必须）。

尝试更改此代码：

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

对此：

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

解释：jqMobile默认使用ajax加载页面，因此新内容将添加到现有DOM中。如果您使用等同于$(#home).live('pageshow', ...)的{{1}}，则要求向HTML元素收听以查找$(#home).on('pageshow', 'html', ...)事件。

每次再次加载同一页面时（通过ajax），事件绑定再次对同一个HTML元素进行，你的代码执行两次，然后执行三次，然后执行四次......

您可能希望在此处阅读此相关问题及其答案：JQueryMobile listen click

UPDATE：

抱歉！我在回答你的意见之前回答。您的代码存在问题，因为您使用的是pageshow而不是live，但您的主要问题是您打开链接的方式：每次您创建第二个on单击，可能您的第一个重复列表正确更新，但您在屏幕上显示第二个空格。

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

Answer 2

.live 是不推荐使用的方法。所以尝试使用以下内容......

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

}

或者您可以使用

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

}

参考here

.live（'pageshow'）需要用户手动刷新才能工作

2 个答案:

UPDATE：