I\'m developing a mobile website using the jQuery Mobile library. I have a header, a footer and a content area on the main page, and any links are loaded into the content area u
You sure can. You want to use .trigger('create')
to initialize any jQuery Mobile widget:
$("a").click(function() {
var toLoad = $(this).attr('href');
// Loading image
$('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
$('#content-body').load(toLoad, function () {
$(this).trigger('create');//it's that easy :)
});
});
Note that you call .trigger('create')
on the parent element of the widget you want to initialize. Also note that since you are loading content through an asynchronous function you will need to call .trigger('create')
in the callback function for your .load()
call so that the elements to initialize are actually present when you try to initialize them.
Also you can sometimes run into an issue where the widget has been initialized but then you changed it's HTML and want to refresh the widget instead. There are functions to do this such as: .listview('refresh')
, .slider('refresh')
, etc.
I just answered a question regarding widgets needing to be initialized or refreshed: how to refresh jquery mobile listviews
Also you will want to change that .click()
to a .delegate()
so the links that are loaded via AJAX will also have this event handler attached:
$('#content-body').delegate('a', 'click', function() {
var toLoad = this.href;//no need to use jQuery here since `this.href` will be available in all major browsers
// Loading image
$('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
$('#content-body').load(toLoad, function () {
$(this).trigger('create');//it's that easy :)
});
});