0

こんにちは、専門家から次の推奨事項があり、これらの推奨事項に基づいてコードを再構築しようとしています。

  • $.each() から true または false を返すことができます。false を返すと、ループは停止します。
  • 連結された文字列から HTML を構築しないようにしてください。これは、簡単に回避できる XSS 脆弱性になりがちです。jQuery は、HTML を安全に構築するためのツールを提供します。
  • 一般に、同じ理由で、特に操作する DOM 要素が既にある場合は、.html() を操作しないようにしてください。
  • onclick などのインライン イベント ハンドラは使用しないでください。まったく。これまで。

これは私が取り組んでいる新しいコードです:

var page = 1;
$(document).on('click', '#devotionclick', function blogs() {
    $('#postlist').empty();
   // $('#category').prepend('<div class="categories_listing"><span data-type="blogs" data-category="5">Blog Category</span></div>');
    var count = "5";
    var result = $.getJSON('http://howtodeployit.com/api/get_posts/?count=' + count + '&page=' + page, function (data, status) {
        if (data !== undefined && data.posts !== undefined) {
            $.each(data.posts, function (i, item) {    
                var str = item.title;

                $('#postlist').append('<div class="article"' + item.id + '"><div>' + item.title + '</div><div>' + item.excerpt + '</div></div>');
                if (data !== undefined) {
                    $('#stats').text('Page ' + data.query.page + ' of ' + data.pages + ' | Total posts ' + data.count_total + '');
                }
                if (data.query.page < data.pages) {
                    $("#loadmore").show();
                } else {
                    $("#loadmore").hide();
                }
            });
            page++;
        }
    });
    $('#postlist').append('<div id="loadmore"><div id="stats"></div><div id="loadmore">load more</div></div>');
    $('#loadmore').click(blogs);
});

HTML:

!-- Page: home -->
    <div id="home" data-role="page">
        <div class="ui_home_bg" data-role="content"></div>
        <div data-role="listview">
            <a href="#devotion" id="devotionclick" data-role="button">Daily Devotional Messages</a>
        </div><!-- links -->
    </div><!-- page -->

<!-- Page: Daily Devotional Messages -->
    <div id="devotion" data-role="page">
        <div data-role="header" data-position="fixed">
            <h2>Daily Devotional Messages</h2>
        </div><!-- header -->
        <div data-role="content" id="postlist"> </div><!-- content -->
    </div><!-- page -->

私が今抱えている問題は次のとおりです。

  1. ボタンをクリックすると、最初の 5 つの投稿が読み込まれますが、「さらに読み込む」テキストをクリックすると、既存のリストに追加するのではなく、次の 5 つが読み込まれます。

  2. リストは、クリックできるはずのリストビュー項目として表示されません

4

1 に答える 1

1

問題 1クリック ハンドラー
が原因です$('#postlist').empty();。新しいアイテムをロードする前に、ページからすべてのアイテムを削除しています。これを削除

于 2013-10-15T08:12:30.347 に答える