2015-05-04 57 views
0

我有這個代碼,當它被盤旋時顯示不同的文本,但似乎無法讓它工作。jQuery調用沒有被觸發

$('a.spoiler').hover(function() { 
    var text = $(this).text(); 
    var content = $(this).attr("content"); 
    $(this).text(content).attr("content", text) 
}); 

這是在HTML頁頭。

和HTML

<!DOCTYPE HTML> 
<html> 
    <head> 
    <script src="js/jquery.min.js"></script>   
    <script>  
     //Spoiler hiding 
     $('a.spoiler').hover(function() { 
     var text = $(this).text(); 
     var content = $(this).attr("content"); 
     $(this).text(content).attr("content", text) 
     }); 
    </script>  
    </head> 
    <body> 
    <a href="" onclick="return false" class="spoiler" content="Winner"> 
     Reveal 
    </a> 
    </body> 
</html> 

但我似乎無法得到它的工作。

任何想法

回答

3

您正嘗試在元素加載頁面之前附加事件。確保元素被使用的文件準備/加載功能加載,然後再連接事件:

$(function(){ 
    $('a.spoiler').hover(function(){ 
     var text = $(this).text(); 
     var content = $(this).attr("content"); 
     $(this).text(content).attr("content", text) 
    }); 
}); 

Working Demo

+0

嗯,如果元素沒有加載到頁面上,直到後來纔會發生什麼。例如,如果元素是在Ajax調用完成後才加載的呢? – unknownSPY

+0

將自定義JS放在body元素的底部而不是頭部,並且只在頭部保留庫/框架引用,以使頁面加載速度更快,這是否更好? –

0

基於@ karthikr的回答是:你的代碼目前是要連接監聽器的方式這個代碼被解釋的時刻不存在的元素。

包裝一下你的代碼到

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

之前執行腳本,從而確保您要附加處理程序的元素確實存在將確保HTML解釋。