Spritely div .click not working

Question

I am using the JS plugin called "Spritely" to animate background images. Everything works (backgrounds are moving). But I can't get a function to be active when clicked on a div(sprite).

(I have the script.js, jquery and spritely included in the ).

HTML is just 2 divs (#container and #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'});
});

Smern · Answer 1 · 2013-08-19T18:05:55.033

Looks like you are attempting using hills without first adding the element to it, try this:

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

I also cleaned up your code a bit with this. There is no need to have two separate ready()s here. I'm using a jQuery selector for #hills since you are using jquery functions on it anyway. I also cache that object so that we don't have to wrap the same jquery object twice.

Jason P · Answer 2 · 2013-08-19T18:12:42.603

You have a variable scope issue (see the comments I added):

$(document).ready(function () {
    $(hills).click(function () {
        alert("hey");
    });
});
var hills; // Your click handler uses this variable, which is never set

$(document).ready(function () {
    //this "hills" variable, since you prefaced with "var", 
    //  is local to this anonymous function,
    //  meaning the click handler can't see it.
    var hills = document.getElementById('hills'); 
    $(hills).pan({
        fps: 30,
        speed: 2,
        dir: 'left'
    });
});

Why have two DOM ready handlers? Why not combine them like this:

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

Another option is to have the second DOM ready handler use the global variable by removing the var keyword:

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

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

Or simply remove the global variable altogether. These snippets only execute once, so there's not much to gain by caching the DOM element:

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

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

Spritely div .click not working

2 Answers2