jQuery 1.8.1

jQuery Mobile 1.1.1

Developing for Android and IOS

3 days with no solution for this. It's driving me nuts. Firstly, I have tried pageshow, pageinit, and .live .on .bind etc. to no avail. My problem is, my app has the following html code in my services.html page with an id of 'servicesPage':

1. <a id="purchase_button" href="#" data-role="button" data-icon="plus">Make a test purchase</a>

a JavaScript script in included in the head of the document which includes the following:

1. // JavaScript for the services page
   $( document ).delegate("#servicesPage", "pageshow", function() {
   
   
   $( "#purchase_button" ).live( "click", function(event, ui) {
   var localUuid = localStorage.getItem("id");
      $.post("http://www.blah.com/mobile/make_a_test_purchase", { id: id},
         function(data){
         alert('A purchase has been successfully made');
          }, "json");
   });
   
   
   });    

So, in any of my browsers this works perfectly well, when I compile out with PhoneGap Build it works perfectly with Android but no matter what I try it won't work on iPhone. Sometimes, a version of the code will fire my event once but not subsequently. Is it my imagination or should this be relatively simple to do? Any help appreciated as this is driving me crazy! I should say that other cross domain post requests are working fine on IOS and are returning data for a login and registration which typically only have to be done once. The 'purchase' function needs to be able to be repeated over and over as a test,

cheers,

Wittner