Why is a function declared in document.ready() not defined when called?

Question

Here is my HTML/JavaScript:

Answer 1

Try this:

$(function() {
    window.foo = function () {
        alert('bar');
    }
});

Basically, you need to expose the function to global scope.