title: Dynamic jQuery/JSON menus made static until logout
body: <p>I've got a list of news articles in &lt; li > format that has been created dynamically using jQuery(.ajax) and JSON. When I receive the JSON data, I constructed the list items and appended them to the parent &lt; ul >.</p>
  
  <p>My problem is that if the user uses the back button and then re-enters the News area, the list gets fetched and appended again, giving me duplicate list items. Is there any way in jQuery to limit the .ajax request to one load? Or should I add all the news &lt; li >'s to session/local storage?</p>
  
  <p>Code:</p>
  
  <pre><code>$('#schoolnews').live("click", function(){
  $.mobile.showPageLoadingMsg();
  var schoolID = sessionStorage.getItem('schoolID');
  var entityType = sessionStorage.getItem('entityType');
  $.ajax({
      url: 'http://www.sycamoreeducation.com/mobile/JSON/getnewslist.php',
      data: {schoolID: 'schoolID', entityType: 'entityType'},
      dataType: 'jsonp',
      jsonp: 'jsoncallback',
      timeout: 5000,
      success: function(data){
      //alert("Success in retreiving JSON News Data!");
      $.mobile.changePage('#news');
      $.each(data, function(index, value){
                  var newslistitems = '&lt;li class="newsitem" data-theme="c"&gt;&lt;h3&gt;' +value.Subject+ '&lt;/h3&gt;&lt;p&gt;Posted on: ' +value.Day+ '&lt;/p&gt;&lt;/li&gt;';
              $('ul#newslist').append(newslistitems);
          });
      $('ul#newslist').listview('refresh');
      $.mobile.hidePageLoadingMsg();
      },
      error: function(){
      alert('Error Message');
      }
  }); //end login ajax call
  }); //end school news click listener
  </code></pre>
  
  <p>Still very much a newbie when it comes to jQuery, so if you can spot any areas where I can improve, please don't hesitate to let me know. Thanks!</p>