Dynamic listview

Dynamic listview

Hi,

I have this code which is working quite well. The listview is styling up properly 'ALL EXCEPT' the first item in the list. Is their any reason for this? When i inspect the item in chrome, it is telling me that no classes has been added to the list item, so I know this is the problem but have no idea how to fix it. 


How can i force the styling on this item. I have tried moving the entire code block on the page but nothing is working.

Any help is greatly appreciated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://www.vetsonline.com/annonces/rss.php?idp=18&id_rss=103&site=14&page=accueil&c_texte=&c_secteur=&c_type_transac=&c_type=&template=rssv2.xml");
 
 feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
 //feed.includeHistoricalEntries();
 feed.setNumEntries(100);
      feed.load(function(result) {
 
 
        if (!result.error) {
var output = '<ul data-role="listview" data-filter="true"';
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
output+= '<li>';
output += '<a href= "'+ entry.link +'" >';
output+= '<h1>' + entry.title  + '</h1>';
output+= '<p>' + entry.contentSnippet  + '</p>';
output+= '</a>';
output+= '</li>';

          }
 output+= '</ul>';
 $('#jobsFeed').html(output);
 $('#jobsFeed').trigger( 'create' );
 
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>

  </head>
  <body>
    <div data-role="page" id="jobs">
      <div data-role="header">
        <h1>Header</h1>
      </div>
      <div data-role="content" id="jobsFeed">
    
      </div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
    </div>
  

  </body>
</html>