I'm trying to build a mobile-safari/iphone web-app using jQuery code I already wrote for the desktop version of the app. The problem I'm having is that when my phone goes to sleep with the web-app running, when I wake it up (slide to unluck) the JavaScript event handlers no longer function. In this case meaning when I click on a link that used to perform an AJAX update via an onclick event it actually follows the link by opening the page in a new Safari window, breaking the appearance of the native iPhone app.
The code that stops working:
$(function() {
var ajaxLoad;
var ajaxClick = function(e) {
e.preventDefault();
e.stopPropagation();
$("body").load( $(this).attr("href"), ajaxLoad );
}
ajaxLoad = function() {
$(this).find("a").click( ajaxClick );
}
$("a").bind( "click", ajaxClick );
});
When the code works the result of the link will open in the web-app frame, when it breaks, the code will open in a new safari window, breaking the look of an actual app.