Jquery Mobile works by “hijacking” a page and loading content and injecting it into the page.

It seems that this creates a problem when i try to inject other content into the page.

I have my index.html and then a page2.html file. I'm setting up jquery mobile in the normal fashion wrapping the contents of each page in a div like so:

<div id="container" data-role="page">
   // my content
<a href="page2.html">go to page 2</a>
</div>

when the user taps go to page 2, it does the nice slide effect. The url in the location bar looks like this: index.html#page2.html

jquery mobile inject the content of the page using the anchors and applies the transition. nice so everthing works great up to the next part.

On page2.html, i have a section that is loading some external data and injecting it into a div.

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a>
<div id="target"></div>
<script src="js/code.js"></script>
<script src="js/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.ajaxtrigger').trigger('click');
});
</script>

The problem i am having is that when i enable the transitions in jquery mobile this script doesn't work. It won't load the data into the div. bummer.

Anyone know what i need to do to get it to trigger and load the content into that div?