Question

On a document ready field of jquery mobile file, I am waiting for a link click. Then following function is executed,

 $(document).ready(function() {

   $("a").click(function ()
   {  
     var t = $(this).attr('href');
     alert(t);
   });
});

On a native webview iOS device doesn’t work while on a normal browser does! On a browser, alert returns href properly, but on native returns just a single #. Strange… Thank you.

Answer 1

Ran into this as well on my iOS6 iPad2 running my HTML5 homescreen app that is under construction. The short of it is there appears to be a bug in either iOS or JQuery/JQueryMobile (which I currently use). After troubleshooting for an hour here is what I found:

1. the event.target [in your example $(this)] the href returned when in Safari or FullScreen Homepage app sometimes returns # and sometimes returns the correct href.

2. The times it returns the href I’m expecting are few and far between however the pattern seems to be that if you clean at the bottom of the image near the a tag’s text (assuming you put text by the image in the a tag. Then it sometime returns the href.

So I tried a number of things and no matter what I tried get the href value is inconsistent on iPad with JQM. So what I did (at least for now) is added data-href markup in the a tag. So for example I have the following markup (with some pseudo markup)

<div>
<a href="./home.hmtl" data-href="./home.html" data-ajax=false data-transistion=none"><img {YOUR IMAGE INFO HERE!} /></a><br/> Label-Text-Under-Image
</div>

Then in JavaScript I can simply do either:
$(this).attr(‘data-href’) like in you example though I didn’t test it with your example
OR what I did was the following so as to affect all the a tags in my page (which is what I wanted to do)

$(document).on(
        "click",
            "a",
            function (event) {
                if (event.target instanceof HTMLImageElement) {                    
                    var aUrl = $(event.target).parent().attr("data-href");
                    if (typeof aUrl != 'undefined') {
                        event.preventDefault();
                        alert(aUrl);
                        window.location = aUrl;
                    }               
                }                            
            }
        );

The real magic in my case was:
$(event.target).parent().attr(“data-href”);
where I got the data-href which is consistently returned correctly on desktop and iPad. Of course the my final version I removed the alert call but that’s what got me working on an iPad with JQM and allow me to keep my homescreen app from launching Safari. BTW I’m using JQM 1.1.0 as I haven’t had a chance to get the latest… not sure if they have a fix for it in the newer version.