1

我是 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

4

1 回答 1

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()循环中就很容易了browseSuccess()。

于 2012-03-13T18:16:26.843 回答