Dynamic content in jQuery Mobile?

Hey there- I'm testing jQuery Mobile and have a question. I wrote开发者_运维技巧 a simple jQuery plug-in that animates a few images based on some parameters. Very basic stuff. Now this works on any page I link to externally (rel="external"). However, if I use the built in Ajax-driven page navigation, none of the images load on subsequent pages. Is there a way to work with dynamically created content within jQuery Mobile?

Script:

$(document).ready(function(){   
  $('#slideshow').rotator(50, 'img');   
});

Markup:

...
<div data-role="page">
    <div id="slideshow">
      <img src="images/1.png">
      <img src="images/2.png">
      <img src="images/3.png">
    </div>
</div>
...

You can bind to the pagebeforecreate event, which will fire when the page content is initially created and start your rotator from there:

$(document).ready(function(){
  $("#pageID").live('pagebeforecreate',function(event){
    $('#slideshow').rotator(50,'img');
  });
});

Your document.ready is on a subpage and when the link is loaded with AJAX, only the page div is taken and put in your DOM, so any javascript you put there in head does not work AND there is no document.ready, because AJAX never triggers it.

If those images are created dynamically you'll need to do $('#slideshow').rotator(50, 'img'); after they are created, in callback function of $.ajax most likely.