Styles are not applying on <li> elements when loading more <li> in a <ul> element.

Styles are not applying on <li> elements when loading more <li> in a <ul> element.

So, I am trying to load more <li> elements in a <ul> element on clicking a button. The markup is something like this.

  1. <ul data-role="listview">
  3.   <li data-inline="true">
  4.     <a href="#" rel="external">
  5.       <span class="imgContainer">
  6.         <img src="#" width="160"/>
  7.       </span>
  8.       <p>
  9.         <span class="title"><strong>#</strong></span>
  10.         <span class="from">#</span>, <span class="views"># views</span>
  11.       </p>
  12.       </a>
  13.   </li>
  14. </ul>

  16. <span data-role="button">Load More</span>
I have applied some styles to each <li> element and the thumbnail image inside it in the "imgContainer" div & the img tag inside it. On initial page load the <ul> has 20 <li> elements in it and the styles apply fine.

When I click on the more button, more <li> elements are loaded but the CSS doesn't apply on the imgContainer div and img tag inside it.

The CSS is conditional CSS using CSS3 Media Query written in the parent page only instead of being inside a CSS files.

  1. @media screen and (device-width:320px)

  3. {
  4. //load CSS from here.
  5. }

Any help with this? 
______________________________________________________

Saurav Srivastava
Designer at SlideShare
Twitter: gx_saurav
Blog: http://gxsaurav.com