Your problem in this line:
$('#content').load($(this).attr('href')).trigger("create");
You create an asynchronous request via .load() and do not .load() for it to complete before calling the .trigger("create") method. So basically you are calling the .trigger("create") method before there is any HTML to initialize.
You can use the callback function that you can pass to .load() to call the .trigger("create") method at the right time.
For instance:
$(function(){ $('#page1').click(function(event) { $('#content').load($(this).attr('href'), function () { $('#content').trigger("create"); }).trigger("create"); return false; }); });
Brief note:
Is there a reason why you use .load() to load external content? jQuery Mobile will do this for you as long as the external content is in the correct format. Here are some documents to explain what I mean: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
And side note:
Using the document.ready event handler is not recommended when using jQuery Mobile. Instead, you should bind to one of the events of a jQuery Mobile page, such as pageinit .
For instance:
//place this in the global scope $(document).on('pageinit', '#my-page', function () { $('#page1').click(function(event) { $('#content').load($(this).attr('href'), function () { $('#content').trigger("create"); }).trigger("create"); return false; }); });
Although, since you are using the identifier as a selector for the click event handler, you can delegate the event handler proxy to element #page1 .
For instance:
$(document).on('click', '#page1', function () { $('#content').load($(this).attr('href'), function () { $('#content').trigger("create"); }).trigger("create"); return false; });
Here is the documentation for jQuery Mobile events (see the big yellow warnings at the top of the page): http://jquerymobile.com/demos/1.1.1/docs/api/events.html