CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Leo Jiang
Leo Jiang

Reputation: 26085

jQuery Mobile buttons not working as expected

<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?

Upvotes: 0

Views: 1405

Answers (2)

pat34515
pat34515

Reputation: 1979

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>');
  });
});

Upvotes: 0

jay c.
jay c.

Reputation: 1561

In addition to @patrick's reply above, you also need to initialize the button widget after attaching it to the document. Try this,

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

Upvotes: 1

Related Questions