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

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'

An开发者_如何转开发y clues as to what I'm doing wrong?

Thanks!

Frequent

HTML:

<ul class="menuList">
    <li>
        <div>
            <a href="l" data-transition="slide" rel="external" class="iconViewport icon">
                <span class="menuTitle">GoHere</span>
                <span class="pusher">111</span>
            </a>
        </div>
    </li>
</ul>

Jquery

function enhanceMobile ()
{
    $('.menuList').attr('data-role', 'listview');
    $('.menuList').listview('refresh');
}

You can't call .listview('refresh'); on an element that isn't a listview already.

If you just freshly add the data-role, you have to call .listview(); which calls a widget constructor (while .listview('refresh'); calls a refresh method of the widget)

[I already sent you that by e-mail, but it belongs here :) ]