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

Question

好的，我一直想问这个问题。我在我的 html 正文标签中插入了更多的 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;
}