Databases
StackOverflow2013
Postsdbo
POjQuery click event only firing once in Chrome and Safari
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery click event only firing once in Chrome and Safari
    text
    copied!<p>JQUERY CODE</p> <pre><code>$(document).ready(function(){ $('#about').css("opacity","0"); $('#decoy').css("opacity","0"); $('#clickabout').css("opacity","0.2"); $('#clickdecoy').css("opacity","0.2"); function clickhq(){ $('#clickhq').css("opacity","1"); $('#clickabout').css("opacity","0.2"); $('#clickdecoy').css("opacity","0.2"); $('#hq').animate({opacity:"1"},2000); $('#about').animate({opacity:"0"},1000); $('#decoy').animate({opacity:"0"},1000); } function clickabout(){ $('#clickhq').css("opacity","0.2"); $('#clickabout').css("opacity","1"); $('#clickdecoy').css("opacity","0.2"); $('#hq').animate({opacity:"0"},1000); $('#about').animate({opacity:"1"},2000); $('#decoy').animate({opacity:"0"},1000); } function clickdecoy(){ $('#clickhq').css("opacity","0.2"); $('#clickabout').css("opacity","0.2"); $('#clickdecoy').css("opacity","1"); $('#hq').animate({opacity:"0"},1000); $('#about').animate({opacity:"0"},1000); $('#decoy').animate({opacity:"1"},2000); } $("#clickhq").on('click',clickhq); $("#clickabout").on('click',clickabout); $("#clickdecoy").on('click',clickdecoy); }); </code></pre> <p>HTML CODE</p> <pre><code>&lt;div id="content"&gt; &lt;div id="activityicons"&gt; &lt;img id="clickhq" src="images/hq.png" width="139" height="139" /&gt; &lt;img id="clickabout" src="images/out.png" width="139" height="139" /&gt; &lt;img id="clickdecoy" src="images/decoy.png" width="139" height="139" /&gt; &lt;/div&gt; &lt;div id="activityiconstext"&gt; &lt;div id="hq"&gt; &lt;/div&gt; &lt;div id="about"&gt; &lt;/div&gt; &lt;div id="decoy"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Basically, when the user clicks on one of the three images, jquery should fade in / out the relevant content. This works fine in jsfiddle, IE and firefox, but not in chrome and safari. </p> <p>A live link can be viewed here: <a href="http://www.alexkearns.co.uk/35norwich/scouts/index.php" rel="nofollow">http://www.alexkearns.co.uk/35norwich/scouts/index.php</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload