javascript - 添加新内容后加载更多按钮不移动

Question

好的，我一直想问这个问题。我在我的 html 正文标记中插入了加载更多 div：

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

每次我刷新我的页面时，加载更多... 文本会在我不喜欢的内容加载之前出现。所以我想通过像这样添加它来利用附加功能：

$("#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;然后使用bottomand 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;
}