讓我的加載更多按鈕停止乘法並追加到我的列表視圖

Question

我是一個jQuery Mobile的新手，我正在處理一個使用ajax動態生成的列表。現在我有一些幫助，可以讓它加載一定數量的項目，然後使用「加載更多」按鈕將更多項目填充到此列表中。我有幾個我似乎無法解決的問題。

1. 我不能得到的「加載更多」追加到底部

2單擊時，我的列表中的「加載更多」按鈕追加多次。它保持最後一個按鈕被點擊，然後再添加一個新的按鈕。

這裏是我的代碼：

這是什麼，是在頁面加載生成內容

function runBrowse() { 

     //Check if all fields have a value 
     $.ajax({ 
      url: "http://www.example.com", 
      data: {firstName: "", middleName: "", lastName: "", resultSize:10}, 
      success: browseSuccess, 
     }); 
    } 

    function runBrowseContinue(restart) { 

     //Check if all fields have a value 
     $.ajax({ 
      url: "http://www.example.com", 
      data: {restartLine: restart, resultSize:10}, 
      success: browseSuccess, 
     }); 
    } 



    function browseSuccess(browseResults){ 
     $.mobile.changePage('#results'); 
     restartLine = browseResults.restartLine; 
     jQuery.each(browseResults.people,handlePerson); 
    } 



    //Usage getMoreData(browseResults.restartLine); 
    function getMoreData(restartLine){ 
     if(restartLine){ 
      runBrowseContinue(restartLine); 
     } 
    } 

    function handlePerson(index, value) { 
     var output = ''; 

     // Add these returns to listview 
     output += '<li>' + '<h3>' + value.name + '</h3>' + '<p>' + value.height + '</p>' + '<p>' + value.weight + 'lbs.' + '</p>' + '</li>'; 
     $('#listview').append(output).listview('refresh'); 
    } 

這是載入更多代碼

$loadMore = $('ul').children('.load-more'); 
    $loadMore.bind('click', function() { 
     var out = []; 
     out.push(getMoreData(restartLine)); 
     $('ul').append(out.join('')).append($loadMore).listview('refresh'); 
    }); 

這是我HTML

<ul data-role="listview" class="listContent" id="listview"> 

    <li class="load-more"><a href="#">Load More</a></li> 
    </ul> 
</div> 

感謝所有幫助:)這

屏幕截圖：

http://cl.ly/2l0w3I0G0f112f381g1f

http://cl.ly/0N002X2Z45320r2Y1K38

Answer 1

從你的截圖看來好像handlePerson功能被添加更多的「人員」到列表中，而無需將「加載更多」按鈕移動到底部，這將解釋「加載更多」按鈕下方的列表項。

function handlePerson(index, value) { 
    var output = ''; 

    // Add these returns to listview 
    output += '<li>' + '<h3>' + value.name + '</h3>' + '<p>' + value.height + '</p>' + '<p>' + value.weight + 'lbs.' + '</p>' + '</li>'; 
    var $loadMore = $('#listview').children('.load-more'); 
    $('#listview').append(output).append($loadMore).listview('refresh'); 
} 

當你添加一個已經存在的DOM元素，jQuery將其移動到新位置，並從舊的刪除：http://api.jquery.com/append

我想不過來警惕這一點。這會爲每個索引（「人物」）創建兩個DOM操作。這將是更好的緩衝所有列表項的輸出，並立即將其追加，這將需要你的代碼略有再流：

function browseSuccess(browseResults){ 
    $.mobile.changePage('#results'); 
    restartLine = browseResults.restartLine; 
    var out = []; 
    jQuery.each(browseResults.people,function (i, v) { 
     out.push(handlePerson(i, v)); 
    }); 
    var $loadMore = $('#listview').children('.load-more'); 
    $('#listview').append(out.join('')).append($loadMore).listview('refresh'); 
} 

function handlePerson(index, value) { 
    return '<li>' + '<h3>' + value.name + '</h3>' + '<p>' + value.height + '</p>' + '<p>' + value.weight + 'lbs.' + '</p>' + '</li>'; 
} 

正如你可以看到它會很容易只刪除將handlePerson()函數全部放在一起，並將其代碼放入函數的$.each()循環中。