list item with icon not rendering correctly when added dynamically

list item with icon not rendering correctly when added dynamically

I'm trying to dynamically build a list where each item has an icon.

When I try static html such as:

 <ul data-role="listview">

       <li>

            <img src="images/dot.png" class="ui-li-icon"/>

            <div><a href="#">some content></a></div>

      </li>

</ul>


everything is fine. When I inspect the <li> element it has the "ui-li-has-icon" class. 


However, when I try to dynamically add the same list item, the "ui-li-has-icon" is missing from the list of classes in the <li> element.


This is how I'm adding the element:


listitem = "<li><img src='images/dot.png' class='ui-li-icon'/><div><a href="#">some content></a></div></li>";

$('<my ul id>').append(listitem);

$('<my ul id>').listview("refresh");


A workaround is to add the class 'ui-li-has-icon' to the <li> element. I'm fine with doing this for now, but could there be a bug in the jquery mobile code that is causing this behavior?