javascript - 新しいコンテンツを追加した後、[さらに読み込む] ボタンが動かない

Question

OK、私はこの質問をするつもりでした。html body タグに load more 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');
        });
    });
});