Create Button Dynamically - JQueryMobile

Very simple:

First create a button HTML JQuery element by:

var button = $("<button>My Button</button>");

Next, inject the button wherever you want it to be in the page:

$("#my_button_div").append(button);

And finally run the button() JQuery Mobile command on the button:

button.button();

You should have a functional and JQM styled button in your page by now.

EDIT: Now it's done with an event you trigger.

.trigger('create')

Details and up-to-date description "How do I make JQM work with content I add to DOM?" is here: http://jquerymobiledictionary.pl/faq.html

Create it and then call page() on the element. It will apply all plugins and styles from jquery mobile to any element you create.

Simple:

var button = $("<button>My Button</button>");
$("#my_button_div").append(button).trigger('create');

here example: jquery mobile create grid dynamically

Above link is broken and the solution doesn't work for me.

The following code does not work:

$(this.el).append("<button id='add2' data-role='button'>Add list item</button>");

$('#add2').page();

The button is added and works perfectly without calling $('#add2').page(); but it has no JQuery Mobile styling. Calling .page() is therefore not a working fix for applying the styling after adding the button to the DOM.