changing <ul> to <ul data-role="listview">

changing <ul> to <ul data-role="listview">

Hi,

I have a list which I'm displaying with icons and title only - no JQM formatting. If the screenwidth is below 320 px, I want to convert the list into a JQM <ul data-role="listview"> list.

I can add the attribute via Jquery, but when I call $('.menuList').listview('refresh'); I get the following error:

cannot call methods on listview prior to initialization; attempted to call method 'refresh'


 Any clues as to what I'm doing wrong?

Thanks in advance.

Frequent

HTML:
  1. <ul class="menuList">
  2.       <li>
  3.             <div>
  4.             <a href="l" data-transition="slide" rel="external" class="iconViewport icon">
  5.                   <span class="menuTitle">GoHere</span>
  6.                   <span class="pusher">111</span>
  7.             </a>
  8.             </div>
  9.       </li>
  10. </ul>
Jquery
  1. function enhanceMobile ()
  2.       {
  3.       $('.menuList').attr('data-role', 'listview');
  4.       $('.menuList').listview('refresh');
  5.       }