0

I have a web app that I want to display as a standalone once a user has bookmarked it to the home screen of their device. I've been testing on an iPhone 5. I'm using the meta tags to make it display as a web app and a bit of jQuery to handle click events, keeping all the links within the standalone and preventing them from launching Mobile Safari. This is all nice and straightforward, until I tried to turn some of my boring text links into image links. The preventDefault() action can't seem to handle the image links and always returns 'The requested URL /undefined was not found on this server.', while text links and standard form buttons work just fine. This is part of a collaborative project for school, and we need it to have a snazzy interface and the image links are a massive part of that.

Here is the simple js I've got to handle the links: 

$( document ).on(
    "click",
    "a",
    function( event ){
       event.preventDefault();  
       location.href = $( event.target ).attr( "href" );
    }
);

The button HTML looks like this:

<div id="loginBtn"><a href="memberLogin.php"><img src="CSS images/0-btn1.png" width="224" height="113" /></a></div>

Any suggestions would be much appreciated.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
feen
  • 1
  • 1
    in iOS the events stop bubbling at the `body`. You shouldn't be attaching event listeners to the `document` anyway... attach delegated handlers as close as possible to the target. – ahren Oct 11 '12 at 05:59
  • I apologise if this is a totally obvious thing - my job was the PHP/SQL part of the project but I'm helping now with this aspect. If I need it to handle all of the links in the entire project, I shouldn't attach it to the `document`? – feen Oct 11 '12 at 06:05

2 Answers2

0

Certain events bubble up from the target element through each parent node until they reach the top of the document (or body in iOS) - so it's pretty inefficient if you handle them at document level. Delegated event handlers are good for dynamically generated content, so you can attach the handler to the nearest parent that is present in the DOM at the time of handler creation. In your case (providing none of your a tags are dynamically generated), you could just do $('a').on(...)

You'll also need to use event.stopPropagation(); to prevent the app from opening in mobile safari once saved to home screen.

ahren
  • 16,803
  • 5
  • 50
  • 70
  • The image links all work now! Unforunately, they launch in Mobile Safari, which is what I set out to avoid initially. – feen Oct 11 '12 at 06:20
  • What are you hoping they launch in? Aren't you using Mobile Safari? – ahren Oct 11 '12 at 06:22
  • I am, technically, but once it has been bookmarked to the home screen it should display without the Safari URL bar and button bar at the top and bottom - just the status bar. The js stopped the links breaking from this display and launching new pages in Mobile Safari, but it's gone back to doing that. – feen Oct 11 '12 at 06:26
  • right, try using `window.location = $(this).attr('href');` instead of `location.href`. – ahren Oct 11 '12 at 06:30
  • It's still launching Mobile Safari. – feen Oct 11 '12 at 06:34
  • It's still opening Safari. I've been looking at this all day now and it's driving me nuts. Thanks for the help so far though. – feen Oct 11 '12 at 06:42
  • Oh, by the way, I would listen to the `tap` event as well as `click`. `$('a').on('tap click', ...)` – ahren Oct 11 '12 at 06:48
0

Now instead of having just one element a using images makes two elements a and img. So I think this is related with the event propagation and PreventDefault. Actually the preventDefault only prevents the default action but does not stops its propagation. Take a look at these link, they will definitly help you.

me_digvijay
  • 5,374
  • 9
  • 46
  • 83