This is messing around in undocumented internals, but the following is working for me:

$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });

There are equivalent methods for buttons, checkboxes etc.

Have a look at the _enchanceControls [sic] method in http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.

Update for 1.0Alpha2: As can be expected when playing around with the internals of a library, this no longer works in the latest version. Changing customTextInput() to textinput() fixes it a bit, but the theme isn t fully applied for some reason. We were warned...

UPDATE

Beta2 has a create event. I will update my faq when the beta2 gets released. See http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Updated faq: http://jquerymobiledictionary.pl/faq.html

As CaffeineFueled proposed - .page() is the way to make JQM work with any part of HTML

.page() can be called only once for an element. Call it on a wrapping element you add to the page. It should handle everything.

The current selected answer is slightly out of date. Use refresh , not page , for styling dynamically added content (lists or forms).

If you add items to a listview, you ll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example, $( ul ).listview( refresh );

via the jQuery Mobile docs, 1.0.4a

After your AJAX call finishes and you insert the form elements try calling:

$("#the-page-id").page();

I believe the jquery-mobile team will be adding a .refresh() method on the various UI elements to solve this issue in the future.

Yeah the issue is as you described. The mobilization is fired when the document is ready. But since your offline DB queries are asynchronous it ends after the document.ready is fired. So the DOM is updated later in the process and doesn t have the extra CSS added to all the divs and list items.

I think you would have to change the source of the mobile js to not run on document ready but run when you tell it to run. Then you would have to call that function in your database callback.

Looks like that is the only option at the moment.

Traditionally I used jqtouch and now sencha. I haven t played much with jQuery mobile.

ALTERNATIVELY - you could write out your HTML after querying it out of the database with the necessary CSS styles on it. If you use Firebug plugin for Firefox you can see what styles / classes are getting applied when the mobilization runs. You could just write out your HTML using those conventions. Not ideal, but would work.

naugtur is right, you have to call .page() on any element that you add to the dom, then it works out nicely:

var el = $( <input type="text"/> )
el.page();
$( #something ).append(el);

This worked for me (jquerymobile1.7.0):

$( #formular ).append( <div data-role="fieldcontain" class="ui-hide-label">  +
 <label for="name" class="ui-hidden-accessible">Name:</label>  +
 <input type="text" name="name" size="25" id="name" placeholder="Name"/>  +
 </div> );  
$( #name ).textinput();

There are currently so called plugin functions for all kind of form elements (e.g. slider, textinput etc.) to create them.

Here s a link to the docs for this feature that Tom talked about. Not sure exactly when they were added, but I m using it and it works for me!

http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html