CODEWITHSUNDEEP
jqueryhtmlcss
Jon Kyte
Jon Kyte

Reputation: 2020

jQuery causing page re-load on iPhone

I'm using this piece of jQuery to show a message to my users on first visit and on click of the 'info' button.

$(document).ready(function()
{
if(!localStorage.newVisitor) {
    localStorage.newVisitor="true";
    $('#popUp').fadeIn(300);
}

$('#popUp').click(function(){
    $('#popUp').fadeOut(300);
});

$('#info').click(function(){
    $('#popUp').fadeIn(300);
    }
);
});

The html is essentially:

<div id="popUp">Hello</div>
<a id="info">Info</a>

The CSS:

#popUp {
    display: none;
}

This is all hunky dory in safari, but when I transfer this to the iPhone for testing, every time I tap the 'Info' button, the popup shows, but then the page instatly refreshes so the message is then reset to it's hidden state.

Any Ideas why this is so anyone?

Thanks!

Upvotes: 0

Views: 57

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Try this:

$('#info').click(function(e){
    e.preventDefault();
    $('#popUp').fadeIn(300);        
});

Btw, your <a> tag should have an href attribute:

<a id="info" href="#">Info</a>

Upvotes: 3

Andrew
Andrew

Reputation: 1880

Replace you this:

<a id="info">Info</a>

To this:

<span id="info">Info</span>

CSS:

#info{cursor:pointer;}

Because you are targeting the id for the click you dont need the <a>, as the <a> tag has certain behaviors that it wants to do for example jump to a point on a page or move to another page.

Upvotes: 2

Related Questions