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
}

説明：ページはデフォルトでajaxを使用してjqMobileによってロードされるため、新しいコンテンツが既存のDOMに追加されます。$(#home).live('pageshow', ...)と同等のを使用する場合$(#home).on('pageshow', 'html', ...)は、HTML要素にイベントをリッスンするように要求しています。pageshow

同じページを（ajaxによって）再度ロードするたびに、同じHTML要素に対してイベントバインディングが再度実行され、コードが2回、次に3回、次に4回実行されます...

この関連する質問とそこにある私の答えを読みたいと思うかもしれません：JQueryMobileリッスンクリック

アップデート：

ごめん！私はあなたのコメントに気付く前に答えました。liveの代わりにを使用しているため、コードに問題がありますが、主な問題はリンクを開く方法です。クリックするたびにon1秒が作成され、複製されたリストの最初のリストが正しく更新されている可能性があります。しかし、画面には空の2番目のグリッドがあります。<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 に答える