javascript - Spritely div .click 不起作用

Question

我正在使用名为“Spritely”的 JS 插件来制作背景图像动画。一切正常(背景在移动)。但是当我点击一个 div(sprite)时，我无法激活一个函数。

(我有 script.js、jquery 和 spritely 包含在 中)。

HTML 只是 2 个 div(#container 和 #hills)

CSS

#container
{
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
background-image:url(clouds.jpg);
background-repeat:repeat-x; 
z-index:-3;
position:absolute;
}
#hills
{
width:100%;
height:250px;
background-image:url(hills.png);
background-repeat:repeat-x;
background-position:bottom;
z-index:1;
position:absolute;
bottom:0px;
}

JavaScript

$(document).ready(function() {
$(hills).click(function(){
    alert("hey");
});
});
var hills;

$(document).ready(function(){
var hills = document.getElementById('hills');
$(hills).pan({fps: 30, speed: 2, dir: 'left'});
}); 

Answer 1

看起来您正在尝试使用 hills 而不先向其添加元素，试试这个:

$(document).ready(function() {
    var $hills = $('#hills');
    $hills.pan({fps: 30, speed: 2, dir: 'left'});
    $hills.click(function(){
        alert("hey");
    });
});

我还用这个清理了你的代码。这里不需要有两个单独的 ready()。我正在为 #hills 使用 jQuery 选择器，因为无论如何您都在其上使用 jquery 函数。我还缓存了该对象，这样我们就不必两次包装同一个 jquery 对象。