Dynamically Create Widgets in DOM

Question

I'm using jQuery mobile 1 alpha 1.

To create a text input for instance in jQuery mobile you add to your HTML

<div data-role='fieldcontain'>
<label for='name'>Text Input:</label>
<input type='text' name='name' id='name' value=''  />
</div>

Supposing you assign the above HTML code to a variable $textinput and type $("#someid").append($textinput); then the problem is that the text input appears but its not themed properly. My guess is that some Javascript runs on page load that adds the correct classes for CSS purposes. This Javascript does not run when I add the HTML directly into the DOM.

What do I do so that the correct Javascript runs when I dynamically add widgets to my DOM?

Answer 1

Take a look at Live Query.

Live Query (formerly Behavior) utilizes the power of jQuery selectors
by binding events or firing callbacks or matched elements auto-magically,
even after the page has been loaded and the DOM updated.