How to apply jQuery UI to the content loaded by AJAX.
I do load content using AJAX jQuery call which has a bunch of div tags and I want to style it when it loads. I am able to get the content but I am not able to style the content.
I am creating an app for mobile and I take an input on change event and load content based on the selected one. Then I append data to my container but the styles here are missed because for the mobile jquery appends the styles automatically after the page loads which is missed for the AJAX content.
If I understand your question correctly then you're trying to apply JavaScript on dynamically loaded content.
Check this thread for help jQuery does not execute on dynamically loaded content, even on a click events as it is discussing a problem similar to yours. Also check the jQuery live() function. Hope that helps!
I had a similar problem and I fixed it with this code:
$.mobile.activePage.page( "destroy" ).page();
Also if I have a list I use this:
$('ul.ui-listview').listview('refresh');
$.mobile.activePage.page( "destroy" ).page();
That will force jQuery to refresh all the elements and apply styles to them.
Edit: Updated code thanks to @Jasper
I believe you are looking for .trigger('create'). Call it on the container when you replace it's content:
$('#container').html(newHTML).trigger('create');