JavaScript called function and scope

I've recently asked the question about the difference between the function level scope and block level scope. The answer was comprehensive and helped me to understand the function level scope and introduced the hoisting concept.

Now I have another deliberation. The example is a jQuery .ready() function and an event handler declared within it. That is to say, why a variable declared in .click() event handler is not being hoisted up to the .ready() function ? Is that because .click() is not property of the .ready() function ? and the variable declared within .click() is being hoisted only up to that function?

Example:

$(‘document’).ready(function(){
    $(‘selector’).click(function(){
        var x = 10; //discussed variable
    });
});

I'm trying to teach JS script myself, but this concept is really hard for me to understand. Could someone explain that with a simple example, or provide relevant link, please.

Thanks