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

5 minutos de lectura

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 relevante:

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

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

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

¿Por que no puedo usar onClick para ejecutar una funcion
nick craver

Es porque esa función no está en un contexto global, que es donde su onclick="" lo esta buscando Tienes que moverlo fuera de tu document.ready (por lo que no tiene un alcance exclusivo para ese cierre), o (un mejor enfoque de la OMI) vincúlelo dentro del document.readyesto es lo que quiero decir con cada uno:


Atándolo por dentro (quítese el onclick="" para esto):

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

o la versión anónima (nuevamente elimine su onclick=""):

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

O muévalo afuera (mantenga su onclick=""):

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

  • o manténgalo dentro, pero declárelo como una función global (mantenga su onclick)

    – Konerak

    30 jul.

  • De hecho, hago AMBOS de estos, dependiendo de las circunstancias. Por ejemplo, a veces uso archivos .ascx con Javascript incluido, y cuando lo hago, colocar la función dentro limita el alcance de la función, pero otras veces quiero una función global a la que llamo desde múltiples inclusiones; en ese caso, Muevo la función fuera del alcance. Entonces, ambas opciones tienen usos.

    –Mark Schultheiss

    30 jul.

  • Los primeros 2 códigos no funcionan en todas las situaciones, especialmente cuando tenemos que pasar parámetros para diferenciar diferentes elementos.

    – JVJplus

    26 sep.

  • .click ha quedado obsoleto.

    – Uraardilla

    22 mar. 21 en 15:43

Defina doIt en su document.ready como una declaración de función.

O deberías usar una expresión de función
o declarar la función fuera de la función 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í, onClick no es realmente la forma jQuery de hacerlo y probablemente debería ser reemplazado por un controlador de clic definido en la función ready, pero funciona y está permitido.

  • ¿Estás seguro de que esto funciona? doIt todavía se declara en ámbito local.

    – miedo al planeta

    30 jul.

  • si hubiera puesto var doIthabrías tenido razón. Omitiendo el var declara una variable global.

    – Konerak

    30 jul.


  • +1 entonces por enseñarme algo nuevo entonces. ¿Es esa una característica de jQuery o aplicable a JavaScript general?

    – miedo al planeta

    30 jul.

  • @fearofawhackplanet: JavaScript general

    –Mark Schultheiss

    30 jul.

  • @fearofawhackplanet vea esto para un tratamiento más profundo del tema: articles.sitepoint.com/article/oriented-programming-1/3

    –Mark Schultheiss

    30 jul.

Lo que debe hacer es vincular un evento de “clic” usando jquery como este.

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

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

        alert('i was clicked');

    });
});  

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

Aquí hay una demostración de jsfiddle en vivo para usted: http://jsfiddle.net/8A5PR/

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

  • @Konerak Creo que no entiende el punto, esto le permite extraer la gestión de eventos onclick de la etiqueta y ponerla en el javascript con la función, por lo tanto, administra su código (comportamiento) por separado de su marcado mientras que la funcionalidad de ejecución sigue siendo la mismo: para manejar el evento de clic del elemento en su página.

    –Mark Schultheiss

    30 jul.

  • @Mark: no creo que @Konerak se haya perdido el punto en absoluto. Esta respuesta dice que usted “necesita vincularnos un evento de clic usando jquery”. Eso no es correcto. Vincular eventos con jQuery es una opción, pero no es necesario que lo haga.

    – usuario113716

    30 jul.


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 arreglarlo

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

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

Un mejor método es insertar un controlador para su evento de clic dentro y 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 eliminar el código de su marcado (algo bueno) en el sentido de que puede eliminar ese clic de su etiqueta de entrada.

¿Por que no puedo usar onClick para ejecutar una funcion
Rijvi Rajib

Lo que está haciendo en este momento es simplemente colocar una función doIt() dentro de un evento window.onload (para todos los efectos). Esta función nunca se llamará fuera de document.ready a menos que la vincule a un elemento porque está atascada dentro del alcance de document.ready.

Debe mover su función fuera del documento. Listo para que pueda ser llamado por eventos externos.

Solo un pequeño enlace para referencia: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

1642402447 159 ¿Por que no puedo usar onClick para ejecutar una funcion
amit soni

Prueba esto…

$(document).ready(function() {


    alert('ready');


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

 });

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

  • Puede ser que llegue tarde para publicar la respuesta porque las respuestas ya están publicadas. No te preocupes 🙂

    – Amit Soni

    30 jul.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad