¿Por qué una función declarada en document.ready () no está definida cuando se llama?

Aquí está mi HTML / JavaScript:

   Untitled Document   $(function(){ var $str = "hello world"; function foo() { alert($str); } });         

Cuando hago clic en el botón, aparece un error de JavaScript que indica que foo no está definido. ¿Cómo puedo llamar a una función de JavaScript declarada dentro de document.ready ()?

Estás colocando el scope de la función dentro de otra función, básicamente.

Imagínate esto:

  

Ese es el facsímil de lo que estás tratando de lograr. Al igual que las variables definidas dentro de una función están fuera de los límites fuera de ella, los nombres de las funciones adoptan las mismas características.

Side-Note JavaScript no requiere $ prefijo en nombres de variables (aunque es aceptable en lo que respecta a los nombres). No sabía si vienes de PHP y estás acostumbrado o consciente.

Pensé en hacer un comentario y una respuesta.

Prueba esto:

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

Básicamente, necesita exponer la función al scope global.

Las variables y los métodos declarados dentro de la función $ (function () solo son accesibles dentro de eso. Si necesita usar los que están fuera, puede hacerlo en el espacio de nombres global como

 window.functionName = functionName; 

No se puede, es privado a ese scope.

Lo que terminé haciendo, lo que debería haber hecho en primer lugar, es agregar un controlador de clic para el botón de envío:

 $("input[name='submitButton']").click(function(){...});