Create Button Dynamically - JQueryMobile

Question

How to create a button dynamically using jQuertMobile.

Answer 1

Very simple:

First create a jQuery HTML element on the button:

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

Then enter the button, wherever you are, on the page:

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

And finally, run the jQuery Mobile button () on the button:

 button.button(); 

You should now have a JQM function button on your page.

Answer 2

EDIT: Now this is done with the event you are triggering.

 .trigger('create') 

Details and updated description "How do I get JQM to work with the content that I add to the DOM?" located 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.

Answer 3

Plain:

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

here's an example: dynamically create a jquery mobile grid

Answer 4

The link above is broken and the solution does not 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 fine without calling $('#add2').page(); but she has no jQuery Mobile style. Therefore, calling .page() not a working fix for applying a style after adding a button to the DOM.