.live('pageshow') needs user manual refresh to work

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;
}

This seems to work great lo load the results in the first page, but if you notice, i append a link to load the next page:

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

The thing is that when that link is clicked it loads the next URL properly, and the data and response alert are with the expected content but the list is not filled... User must manually refresh that view to do so..

Is this because i shouldnt use .live('pageshow') ?

-EDIT-

Page markup is like this

<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

The problem is what you said: you shouldn't use $.live with jQueryMobile (unless you really have to).

Try changing your code from this:

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

To this:

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

Explanation: pages are by default loaded by jqMobile using ajax, so the new content is added to the existent DOM. If you use $(#home).live('pageshow', ...), which is equivalent to $(#home).on('pageshow', 'html', ...), you are asking to the HTML element to listen for the pageshow event.

Every time you load the same page again (by ajax) the event binding is done again to the same HTML element and your code is executed two times, then three times, then four...

You may want to read this related question and my answer there: JQueryMobile listen click

UPDATE:

Sorry! I answered before noticing your comment. There is a problem in your code because you are using live instead of on, but your main problem is the way you are opening the link: it will create a second <div id='home'> every time you click, and probably the first of your duplicated lists is correctly being updated, but you have in screen the second grid which is empty.

You have to make some changes in how you load the data in order to make it work. Please read my comment in your question.