Por que não posso usar o onClick para executar uma function dentro de uma function .ready do jQuery $ (document)?

Eu sou novo em Javascript e jQuery. Eu quero clicar em um botão e ter uma function js executada. (Para este exemplo, é apenas um alerta, mas na verdade é uma function de ajax.)

O primeiro alerta aparece, mas depois que clico no botão, nunca vejo o segundo (“faça”) alerta. Parece que o javascript não acha que a function doIt () é definida quando o botão é clicado.

Aqui está o código relevante:

$(document).ready(function() { alert('ready'); function doIt() { alert('did it'); }; } )    

É porque essa function não está em um contexto global, que é onde seu onclick="" está procurando. Você precisa movê-lo para fora do seu document.ready (para que ele não tenha um escopo exclusivo), ou (uma abordagem melhor, IMO) vincule-o dentro do document.ready , aqui está o que quero dizer com cada um:


Ligando dentro (remova seu onclick="" para isso):

 $(document).ready(function() { alert('ready'); $("input[name='Go']").click(doIt); function doIt() { alert('did it'); } }); 

ou a versão anônima (novamente, remova seu onclick="" ):

 $(document).ready(function() { alert('ready'); $("input[name='Go']").click(function() { alert('did it'); }); }); 

Ou mova-o para fora (mantenha seu onclick="" ):

 $(document).ready(function() { alert('ready'); }); function doIt() { alert('did it'); } 

Você define doIt no seu document.ready como uma instrução de function.

Você deve usar uma expressão de function ou declarar a function fora da function pronta .

 $(document).ready(function() { alert('ready'); doIt = function() { //now has global scope. alert('did it'); }; } )    

(sim, o onClick não é realmente a maneira do jQuery de fazê-lo e provavelmente deve ser substituído por um manipulador de cliques definido na function ready, mas funciona e é permitido .

O que você precisa fazer é ligar um evento “click” a ele usando jquery como este.

 jQuery(document).ready(function($) { $('#my_button').click(function() { alert('i was clicked'); }); });  

Aqui está uma demonstração jsfiddle ao vivo para você: http://jsfiddle.net/8A5PR/

Aqui está a página de manual para você: http://api.jquery.com/click/

O Javascript tem dois tipos de escopo, global e nível de function. Se você declarar doIt dentro de uma function, ela não será visível fora da function. Existem algumas maneiras de corrigi-lo

 //just declare the function outside the ready function $(function() { }); function doIt() { alert('did it'); } //decare a variable outside the function var doIt; $(function() { doIt = function() { alert('did it'); } }); // if you dont use var, variables are global $(function() { doIt = function() { alert('did it'); } }) 
 $(document).ready(function() { }); 

é um manipulador de events para document.ready, as funções dentro desse manipulador estão dentro desse escopo.

Um método melhor é inserir um manipulador para o seu evento de clique dentro dele e chamar essa function lá.

 $(document).ready(function() { alert('ready'); $('body input').click(function(){ doIt(); }); function doIt() { alert('did it'); }; }); 

Isso TAMBÉM tem o efeito colateral de remover o código da sua marcação (uma coisa boa), pois você pode remover o onclick da sua tag de input.

O que você está fazendo agora é simplesmente colocar uma function doIt () dentro de um evento window.onload (para todos os intentos e propósitos). Esta function nunca será chamada fora do document.ready, a menos que você a vincule a um elemento porque ele está preso dentro do escopo de document.ready.

Você precisa mover sua function para fora do document.ready para que ela possa ser chamada por events externos.

Apenas um pequeno link para referência: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Tente isso …

 $(document).ready(function() { alert('ready'); $("#Go").submit(function(event) { alert('did it'); }); });  

Sim, como mencionado por outros, você realmente precisa mover a function para fora da declaração pronta do jquery. Observe também que o javascript é sensível a maiúsculas e minúsculas, portanto, você deve usar onClick em vez de onclick. Saudações