使用 JQuery 将 JSON 数据传递到 DIV答案

【问题标题】：Using JQuery to pass JSON data into DIVs使用 JQuery 将 JSON 数据传递到 DIV
【发布时间】：2013-10-15 16:16:59
【问题描述】：

您好，我有来自专家的以下建议，我正在尝试根据这些建议重建我的代码：

从 $.each() 你可以返回真或假。如果返回 false，则循环停止。
尽量不要从串联的字符串构建 HTML。这很容易出现XSS 容易避免的漏洞。 jQuery 为您提供工具安全地构建 HTML。
一般来说，出于同样的原因，尽量避免使用 .html()，特别是如果您已经有 DOM 元素可以使用。
不要使用像 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 -->

我现在遇到的问题是：

当我点击按钮时，它会加载前 5 个帖子，但当我点击“加载更多”文本时，它会加载接下来的 5 个而不是附加到现有列表。
列表未显示为应可点击的 Listview 项目

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

问题 1
这是因为点击处理程序中的$('#postlist').empty();....在加载新项目之前，您要从页面中删除所有项目。删除这个

【讨论】：