2015-05-04 59 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解释。