3

Quiero que se active un onclick al momento de que cargue la página

<a href='cargar' onclick='myFunction'>cargar automaticamente</a>

tengo este codigo JavaScript pero no me funcionó:

<script>
$(document).ready(function(){
  // despues del código
  $('.cargar').click();
});
</script>

¿cómo hago?

4 respuestas 4

5

El problema en tu codigo es que estas llamando el selector de una clase $(".cargar").click() mientras en el html tu link es <a href='cargar' onclick='myFunction'>cargar automaticamente</a> osea que no tiene clase.

para hacer la carga automatica y simular el click de usuario con .click() en este caso el enclance o tag <a></a> no es lo adecuado.

el atributo href sirve para redireccionar la pagina, osea cambiar el url. lo que tendrias que hacer para que funcione es lo siguiente:

$(document).ready(function(){
   $(".cargar").click();
});
function myFunction(){

   console.log("cargando");

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="cargar" type="button" onclick='myFunction()'>cargar automaticamente </button>

cambiar el enclance por un boton ya que lo que estas intentando hacer es cargar datos a traves de una funcion pasada por onclick y no redirigir a otra pagina.

a este boton le agregas la clase cargar asi tu $(".cargar").click() punta a ese boton gracias a el selector.

PD: Recuerda que el selector . llama el atributo class mientras el selector # llama el atributo id, te recomiendo que mires este link en ingles para entender los selectores css, que son los mismos utilizados en jQuery

espero que te sea de ayuda, exitos

3

Tienes 2 opciones

  1. $(document).ready() ejecutará código hasta que todo el DOM quede listo
  2. $(window).on("load", function(){}) que ejecutará el código hasta que la página completa este lista, eso incluye iframes, imágenes, etc

Entonces una manera de asegurar que un evento click asociado a un botón se ejecute hasta que la página este lista puede quedar de este modo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <button id="carga">Clic me</button>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script>
      let button = $("#carga")
      
      $(window).on("load", function(){
        button.click(function(){
          console.log("hola Mundo")
        })
      })
    </script>
    </body>
    </html>

Donde como puedes notar

  1. Accedemos por medio de JQuery al objeto Window y posterior a eso con ayuda de load verificamos que absolutamente todo de la página web este cargado
  2. Ejecutamos una función anónima como segundo argumento y por dentro de esta función anónima colocamos todo el código que debe funcionar hasta después de haber cargado la página web en su totalidad

Acceso a la documentación para referenciar jquery

Aunque es claro que con addEventListeners en JS puro lo podríamos lograr igual, aquí un ejemplo

let button = document.getElementById("carga")

  window.addEventListener("load", function(){
    button.addEventListener("click", function(){
      console.log("Hola Mundo")
    })
  })
1
  • quien vota negativo sería bueno que argumente el por que
    – user75901
    Commented el 23 ene. 2019 a las 22:28
2

Normalmente cuando capturas un evento click para ejecutar alguna función lo haces con el evento onclick, pero para ejecutar el mismo código(usando jquery como al parecer quieres usar) cuando la página esté cargada:

$(window).on("load", function(){
    //Aquí va tu código... 
})

Con eso bastaría... Solo pones las instrucciones que quieres hacer con el click dentro de esta función

2

Deberias de añadir parentesis al codigo:

<a href='cargar' onclick='myFunction()'>cargar automaticamente</a>

Pero, creo que deberías de llamar a la función directamente sin forzar el click a no ser que sea estrictamente necesario. Esto hará el código mas legible

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.