¿Por qué no puedo usar onClick para ejecutar una función dentro de una función jQuery $ (document) .ready?

Soy nuevo en Javascript y jQuery. Quiero hacer clic en un botón y ejecutar una función js. (Para este ejemplo, es solo una alerta, pero en realidad es una función ajax.)

Aparece la primera alerta, pero después de hacer clic en el botón, nunca veo la segunda alerta ("lo hice"). Parece que javascript no cree que la función doIt() esté definida cuando se hace clic en el botón.

Aquí está el código correspondiente:

$(document).ready(function() 
{ 
    alert('ready'); 

    function doIt() { 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

Fuente

2010-07-30 jalperin

Es debido a que la función no se encuentra en un contexto global, que es donde su onclick="" lo está buscando. Es necesario para moverlo fuera de su document.ready (lo que no es de ámbito exclusivamente a que el cierre), o (un mejor enfoque OMI) se unen dentro de la document.ready, esto es lo que quiero decir con cada uno:

Encuadernación dentro (quitar su onclick="" para esto):

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

o la versión anónima (de nuevo quitar su onclick=""):

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

o moverlo fuera (mantener su onclick=""):

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

Fuente

2010-07-30 13:03:44

o mantenerlo dentro, pero declararlo como una función global (mantenga su clic) – Konerak

En realidad, hago AMBAS cosas, según las circunstancias. Por ejemplo, utilizo archivos .ascx con Javascript incluido a veces, y cuando lo hago, ubicar la función dentro limita el alcance de la función, pero otras veces quiero que una función global que llamo desde múltiples incluya, en ese caso, Muevo la función fuera del alcance. Entonces, ambas opciones tienen usos. –

Lo que hay que hacer es enlazar un evento de "clic" a él utilizando jQuery como este.

jQuery(document).ready(function($) { 

    $('#my_button').click(function() { 

     alert('i was clicked'); 

    }); 
}); 

<input type="button" id="my_button" value="Go" />

Aquí es una demostración jsFiddle vivo para usted: http://jsfiddle.net/8A5PR/

Aquí está la página del manual para usted: http://api.jquery.com/click/

Fuente

2010-07-30 13:03:42

No, el onClick es correcto. – Konerak

@Konerak Creo que te pierdes el punto, esto te permite extraer la gestión de eventos onclick de la etiqueta y ponerla en el javascript con la función, así gestionas tu código (comportamiento) separado de tu marcado mientras la funcionalidad de ejecución permanece lo mismo - para manejar el evento click del elemento en su página. –

@Mark - No creo que @Konerak se haya perdido el objetivo. Esta respuesta indica que * "necesita vincularnos un evento de clic utilizando jquery" *. Eso no es correcto. La vinculación de eventos con jQuery es una opción, pero no es necesario que lo haga. – user113716

Se define doIT en su document.ready como una sentencia de función.

O se debe utilizar una expresión de función o declarar la función de la función de lista.

$(document).ready(function() 
{ 
    alert('ready'); 

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

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

(sí, el onClick no es realmente el camino jQuery de hacerlo y, probablemente, debe ser sustituido por un controlador de clic se define en la función de lista, pero obras y se permite.

Fuente

2010-07-30 13:04:17 Konerak

¿estás seguro de que esto funciona? 'doIt' todavía se declara en el ámbito local. – fearofawhackplanet

Si hubiera puesto 'var doit', habría estado en lo cierto. Omitir el 'var' declara una variable global. – Konerak

+1 luego por enseñarme algo nuevo. ¿Es eso una característica jQuery o aplicable a JavaScript general? – fearofawhackplanet

Lo lo que está haciendo en este momento es simplemente poner una función doIt() dentro de (a todos los efectos) evento window.onload. Esta función nunca será llamada fuera del documento. lista a menos que la vincule a un elemento porque está atrapada dentro el alcance de document.ready.

Necesita mover su fu nction fuera del documento. listo para que pueda ser llamado por eventos externos.

Sólo un poco de enlace para la referencia: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Fuente

2010-07-30 13:06:15

De la documentación: "Con $ (documento). ready(), puedes hacer que tus eventos se carguen o disparen o lo que quieras que hagan antes de que se cargue la ventana ". http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready() –

Oh, cometí un error, supongo que es ANTES de que window.onload. –

No es realmente un error solo entender :) otra forma de indicar esto es "cuando el DOM esté listo", por lo que esa página podría no estar representada al 100%, pero el DOM (Modelo de Objeto de Documento) está listo. –

Prueba esto ...

$(document).ready(function() { 


    alert('ready'); 


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

}); 

<input name="Go" id="Go" type="button" value="Go" />

Fuente

2010-07-30 13:06:21

Podría llegar tarde a publicar respuestas porque ya están publicadas ... Sin preocupaciones :) –

Javascript tiene dos tipos de alcance, global y nivel de función. Si declara doIt dentro de una función, no será visible fuera de la función. Hay algunas maneras de solucionarlo

//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'); } 
})

Fuente

2010-07-30 13:07:15

$(document).ready(function() 
{ 
});

es un controlador de eventos para document.ready, las funciones dentro de ese manejador están dentro de ese ámbito.

Un mejor método es insertar un controlador para su evento de clic dentro, luego llamar a esa función allí.

$(document).ready(function() 
{ 
    alert('ready'); 

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

Esto también tiene el efecto secundario de la eliminación de código de su margen de beneficio (una buena cosa) en la que se puede extraer que onclick de su etiqueta de entrada.

Fuente

2010-07-30 13:07:35

Sí, como lo mencionaron otros, realmente necesita mover la función fuera de la declaración jquery ready. También tenga en cuenta que javascript distingue entre mayúsculas y minúsculas, por lo tanto, debe usar onClick en lugar de onclick. Saludos

Fuente

2010-07-30 13:08:15 Muleskinner

En realidad, no es javascript. Es un atributo HTML. 'onclick' funcionará bien, al igual que' oNcLiCk'. – user113716

¿Por qué no puedo usar onClick para ejecutar una función dentro de una función jQuery $ (document) .ready?

Respuesta

Cuestiones relacionadas