Использование JQuery для передачи данных в формате JSON DIVs

Question

Привет У меня есть следующие рекомендации от эксперта, и я пытаюсь восстановить мой код на основе этих рекомендаций:

• от $ .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 --> 

Вопросы, я имею право сейчас:

1. Когда я нажмите кнопку «Загрузить» первые 5 сообщений, но когда я нажимаю «Загрузить больше», текст загружает следующие 5, а не добавление к существующим спискам.

2. по спискам не отображается как Listview элемент, который должен быть интерактивными

Answer 1

Задача 1
Это из-за в обработчик щелчка .... вы удаляете все элементы из перед загрузкой новых элементов. Удалить это