json2htmled jQuery mobile button inside table td looks old, has old button inside new one after button()/refresh

Question

I'm using this transform to build a jQuery mobile button inside of a regular table 'td':

{
    "tag":"button",
    "type":"button",
    "id":"${idPrefix}-delete",
    "data-role":"button",
    "data-mini":"true",
    "data-icon":"delete",
    "html":"Delete"
}

but it renders as an old HTML button.

After I manually refresh the button, it looks like a mobile button with the icon, but the old button is "minified" inside of it.

How can this be fixed?

---

missing ::before?

I just compared it to a normal looking mobile button, and the problematic button is missing the ::before right before the <button> tag.

---

I removed all of the mobile attributes and tried to call button() later, same result.

Answer 1

To speed up web app initializing and to increase jQuery Mobile's performance, the team decided to drop .buttonMarkup() widget and replace it with classes.

There is no longer data-role=button, data-mini=true, etc... All are replaced with classes as follows.

To convert a button or an anchor into a jQM button, just add ui-btn class. To add an icon with position ui-btn-icon-left, right, top, bottom. Icon's image ui-icon-bars, delete, info, etc. Mini button/anchor ui-mini. Button's theme ui-btn-a or b.

<button class="ui-btn ui-mini ui-btn-icon-right ui-icon-delete">Button</button>

JSFiddle Demo