jQuery的單擊事件僅適用於Chrome和Safari

jQuery代碼jQuery的單擊事件僅適用於Chrome和Safari

$(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); 

});

HTML代碼發射一次

<div id="content"> 

<div id="activityicons"> 
<img id="clickhq" src="images/hq.png" width="139" height="139" /> 
<img id="clickabout" src="images/out.png" width="139" height="139" /> 
<img id="clickdecoy" src="images/decoy.png" width="139" height="139" /> 
</div> 

<div id="activityiconstext"> 

<div id="hq"> 
</div> 

<div id="about"> 
</div> 

<div id="decoy"> 
</div> 

</div> 

</div>

基本上，當上了三幅圖像中的一個用戶點擊，jQuery的應該淡入/淡出相關內容。這在jsfiddle，IE和firefox中可以正常工作，但不適用於Chrome和Safari。

一個活鏈接在這裏可以查看：http://www.alexkearns.co.uk/35norwich/scouts/index.php

來源

2013-07-30 bigal

FWIW儘量不要在你的$（document）.ready函數中建立/聲明你的函數。這些可以被拉出來，只是在一個直接的JS文件 –

您在您的IMG可以在http://www.alexkearns.co.uk/35norwich/scouts/index.php被點擊一次正確的。

但是，您提供的html和js代碼會響應Chrome，Firefox和IE中的點擊事件。

那麼，我們如何重現這個問題呢？

來源

2013-07-30 23:06:31

我忘了在帖子中提到的是，即使你第一次點擊一個圖標，你應該能夠點擊不同的圖標來改變內容。在Chrome和Safari瀏覽器中，一旦點擊了其中一個圖像，就不能點擊任何其他圖像 – bigal

是的，您提供的代碼允許我在Chrome中多次點擊多個圖標。既然你在php中找到了一個解決方法，那麼你的腳本看起來像是在發生其他事情，你沒有意識到它正在影響你的js。 –

變化jquery的URL從

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

源到

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

來源

2013-07-30 23:28:43 Gomino

這並沒有改變只能工作一次的點擊事件 – bigal

您確定在更改網址後清空了緩存嗎？ – Gomino

我通過使用涉及PHP一種變通方法且僅當一個特定的GET變量設置顯示內容固定它

來源

2013-07-31 09:53:47 bigal

jQuery的單擊事件僅適用於Chrome和Safari

回答

相關問題