Dynamically Create Widgets in DOM

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?

---

While adding input instance runtime give id to your div so it can be catch by $. Create your dome like below

<div data-role='fieldcontain' id="field1">

Text Input:

After adding it just run below script to convert it mobile object.

$("#field1").fieldcontain(); $("#name").textinput();

---

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.