Can't alert href val?

Question

The following code gives me an alert with nothing but a # symbol inside it. Why?

EDIT: I should note that the code is inside a jQuery .click event...if I place it outside of that, it works properly. Here is the fuller code:

 $('#continue').click(function(){
                                 var _href = $("#continue").attr("href");
                                 alert(_href);                                
            });


<a href="selectRadius.html" data-icon="arrow-r" id="continue" style="float:right;" data-role="button" data-inline="true">Continue</a>

EDIT2: This all works fine in jsfiddle. But in the xcode iphone simulator I just get #.

Answer 1

Judging by only the code you typed, probably the code runs too early. Try wrapping the JS in

$(function() {
    // your code here
});

Or

$(document).ready(function(){ 
    // your code here
});

Update:

Well, since it's an iPhone simulator, it changes things. Remember, nobody can help you unless you give all the details of the problem, no matter how much experience they have.

Did you try the touchstart / touchend / tap events instead of click? As far as I know, Apple has been having problems with the click events. Also, click events on mobile devices will have a slower response (a delay of approx 300ms if I remember well) so you're better just using touch specific events.

What are you building? Is it a mobile web app or? Will it run in a standard mobile browser or something like PhoneGap etc?

Update2:

Ok. It works as long as the code is not called on Click. This eliminates the possibility of another piece of code replacing your "href" with another value because that code would have to be inside your $('#continue').click(function(){ }); block.

The click event is simulated on a touch phone, that's why the touch events are faster (they are native) and less likely to cause problems. You should also make sure that you return false there and not follow the link, that might be what's replacing your "href".

Answer 2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){ 
    $('#continue').click(function(e) {
        var _href = $(this).attr('href');
        alert(_href);

        e.preventDefault();
        return(false);
        /*
           the return is legacy code, used by some
           browsers to detect if current event handler
           is braking default behaviour

           the e.preventDefault() function is the jQuery
           way to do it
        */
    });
});
</script>

<a href="selectRadius.html" data-icon="arrow-r" id="continue" style="float:right;" data-role="button" data-inline="true">Continue</a>

Without this line the link is followed and a refresh occurs killing the current script.

Answer 3

https://github.com/jquery/jquery-mobile/issues/3777