Question

<ul data-role="listview">
  <li>Facebook</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

$(document).bind('pagebeforecreate',function(){
  $('form ul li').each(function(){
    $(this).html('<a role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>');
  });
});

The code above should change the listview into a list of buttons with a plus icon on the left side. However, it isn’t working for me. The <a...></a> is being inserted correctly, but the icon isn’t showing up correctly. This default icon is still being displayed. How can I fix this?

Answer 1

According to the jQuery mobile docs a data-role="button" attribute is required to style any anchor link as a button.

In your code you have:

<a role="button"

This is incorrect.
You need to change this to:

<a data-role="button"

So your whole code will now be:

<ul data-role="listview">
  <li>Facebook</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

$(document).bind('pagebeforecreate',function(){
  $('form ul li').each(function(){
    $(this).html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>');
  });
});