CODEWITHSUNDEEP
jqueryjquery-mobile
Finder
Finder

Reputation: 8741

Create Button Dynamically - JQueryMobile

How to create the button dynamically using jQuertMobile.

Upvotes: 8

Views: 12386

Answers (4)

Jon
Jon

Reputation: 76

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.

Upvotes: 0

fermin
fermin

Reputation: 633

Simple:

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

here example: jquery mobile create grid dynamically

Upvotes: 2

naugtur
naugtur

Reputation: 16905

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.

Upvotes: 8

Erez Rabih
Erez Rabih

Reputation: 15808

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.

Upvotes: 10

Related Questions