在追加新内容后加载更多按钮不移动

Question

好的，我一直想问这个问题。我在我的html body标签中插入了更多div：

<a href="#" class="load-more">Load More...</a>

每次刷新页面时，在加载内容之前，“加载更多...”文本会显示为“我不喜欢”。所以我想通过添加它来利用append函数：

$("#postlist").listview().listview('refresh').append('<a class="load-more">Load more...</a>');

这似乎可以解决这个问题，因为它没有首先显示在页面刷新上，但我遇到的挑战是，当添加新内容时，加载更多文本不会移动到页面末尾而是保留在它最初出现时的初始位置。我该如何解决这个问题，或者有更好的方法可以使用：

加载更多代码：

$(document).on("click", ".load-more", function() {
    $.getJSON("url", function(data) {
        $.each(data, function (key, val) {
        var rtitle = $('<p/>', {'class' : 'vtitle', html: val.title}),
            rexcerpt = $('<p/>', {'class': 'vexcept', html: val.excerpt});
            var rappend = $('<li/>').append(rtitle, rexcerpt);
            $('#postlist').append(rappend);
            $('#postlist').listview().listview('refresh');
        });
    });
});

Answer 1

您可以设置父标记position:relative;并加载更多position:absolute;，然后使用bottom和left，如下所示：

jsFIddle

<强> HTML

<div>
    <a>load more...</a>
</div>

<强> CSS

div{
    width:500px;
    height:300px;
    position:relative;
    background:tomato;
}

a{
    position:absolute;
    bottom:10px;
    left:10px;
    display:block;
    padding:5px;
    background:#eee;
}