Question

Okay, I have setup up a handler for a div click but for some reason it fires on document.ready, and I can’t really figure out why. Here is my code:

function statusCallback(status){
    //THIS IS THE JSONP CALLBACK RECEIVED FROM THE SERVER
    if(status.title==null){
        $('#core').attr('class','play');
        $('#button').animate({marginLeft:'350px'},2000,'easeOutCubic',function(){
            $('#button').click(initialBinder());
        });
    }else{

    }
}
function initialBinder(){
    $('#button').unbind('click');
    $('#core').attr('class','load');
    $('#button').animate({marginLeft:'0px'},2000,'easeOutCubic',function(){
        $.ajax({
            url:'http://24.182.211.76/status.php',
            crossDomain:true,
            dataType:'jsonp'
        });
    });
}
$(document).ready(function(event){
    $('#button').click(initialBinder());
});

Answer 1

Change:

$('#button').click(initialBinder());

to:

$('#button').click(initialBinder);

The former will actually call the function, not return a function pointer to it.

Perhaps this little bit of code can clarify the difference:

function foo(x, y) //I'm function foo, I add two numbers like a boss
{
   return x + y;
};

var x = foo(1,1); //x is 2 because we called the function
var y = foo; //y is a reference to function foo, no parentheses
var z = y(1,1); //z is 2 because we called foo through reference y
document.write('x = ' + x + '<br />z = ' + z);