¿Por qué esta función de clic de jQuery no funciona?

116

Código:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

El código anterior no funciona. Cuando hago clic en #clicker, no alerta y no se oculta. Revisé la consola y no obtengo errores. También verifiqué si JQuery se estaba cargando y, de hecho, lo está. Así que no estoy seguro de cuál es el problema. También hice una función de documento listo con una alerta y funcionó, así que no estoy seguro de qué estoy haciendo mal. Por favor ayuda. ¡Gracias!

javascript jquery onclick click onclicklistener Starbucks
fuente
3
Envuelva el código en document.ready
karthikr
1
¿Verificó la consola del navegador si hay algún error, sintaxis o archivo no encontrado o algo más?
Siddharth Pandey
1
Posible duplicado de ¿Por qué jQuery o un método DOM como getElementById no encuentra el elemento?
user4642212

Respuestas:

180

Se supone que debes agregar el código javascript en un $(document).ready(function() {});bloque.

es decir

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Como dice la documentación de jQuery : "Una página no se puede manipular de forma segura hasta que el documento esté" listo ". JQuery detecta este estado de preparación para usted. El código incluido en el interior $( document ).ready()solo se ejecutará una vez que el Modelo de objetos de documento (DOM) de la página esté listo para JavaScript código para ejecutar "

Mobius
fuente
7
¡¡Que estúpido de mi parte!! Aún aprendiendo. Pensé que la función de clic no necesita una, ya que se activa al hacer clic en comparación con el documento. Listo donde se carga al cargar la página.
Starbucks
7
@starbucks No te preocupes demasiado por eso, todos cometemos errores, y especialmente al aprender :)
mobius
4
La función de preparación del documento configura los oyentes en función de lo que encuentra en la página. Si no lo hace, nunca se configuran. La mejor manera de hacer esto, sin embargo, es delegarlos con la función "on ()". ¡De esa manera, cualquier elemento agregado a la página después de la carga seguirá funcionando!
Sean Kendle
1
Además, con la función "on", no es necesario utilizar la función de preparación de documentos. Establece al oyente en el nivel del documento y luego raspa la página para que los elementos la escuchen. Por eso es un poco más rápido ser un poco más específico sobre el tipo de elemento que desea escuchar, como "div.listentome" en lugar de ".listentome". En lugar de verificar cada elemento para la clase "listentome", solo verifica los divs, en este ejemplo.
Sean Kendle
2
@SeanKendle - No es así como .on()funciona. Puede (opcionalmente) usarlo para crear controladores delegados, pero de cualquier manera no "raspa la página", vincula a un oyente a los elementos específicos en el objeto jQuery al que lo llama.
nnnnnn
65

Encontré la mejor solución para este problema usando ON con $ (document).

 $(document).on('click', '#yourid', function() { alert("hello"); });

para id comience con ver a continuación:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

finalmente, después de 1 semana, no necesito agregar un clic. Espero que esto ayude a mucha gente

usuario5636597
fuente
2
Ah, gracias, lo anterior no funcionó para mí, ¡pero esto sí! (probablemente alguna interacción extraña con angular y enrutamiento)
Flink
Al igual que Flink, también resolví el problema con esto. Gracias .. 100 upvote ..
Zeta
3
Se llama delegación y es necesario para contenido insertado o movido dinámicamente
mplungjan
¡Este funcionó para mí! Gracias :)
Amrit Pal Singh
20

Su código puede funcionar sin document.ready () solo asegúrese de que su script esté después del #clicker. Consulte esta demostración: http://jsbin.com/aPAsaZo/1/

La idea en el concepto listo. Si está seguro de que su script es lo último en su página o está después del elemento afectado, funcionará.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

Aviso: en eljsbindemo reemplace httpcon httpsallí en el código, o use esta variante Demo

SaidbakR
fuente
11
+1: su respuesta explica por qué se necesita la document.ready()función.
Kevin
1
Esta es una mejor respuesta porque la sugerencia de que el script jquery debe estar dentro de una función 'document.ready ()' es engañosa. Sí, es más seguro allí, pero si configura el elemento html para una función jquery sobre la marcha (como consultar una fila de la tabla según el botón en el que se haga clic), debe estar fuera / después de esa función. Cambié por error el nombre del div de destino para mis superposiciones emergentes y luego pasé varias horas frustrantes buscando un error de script. Gran lección aprendida.
johnlholden
Esta es una respuesta incorrecta, porque el código JS debería estar en el encabezado del DOM y no en línea. El hecho de que haya pasado varias horas buscando el error de script no es un problema de JS, es su problema no leer los documentos correctamente y no saber cómo usar las herramientas de depuración.
Andrey Shipilov
@AndreyShipilov ¿Quién ha dicho eso? Solo mire el código fuente de esta página y vaya al final, verá el código javascript allí.
SaidbakR
1
@AndreyShipilov - hace que sabe cómo utilizar las herramientas de depuración para solucionar este problema? Entonces, por favor, comparta su conocimiento con otros en lugar de ofenderlos. Trate de ser constructivo y justo.
Matt
6

Tienes que envolver tu código Javascript con $(document).ready(function(){});Look this JSfiddle .

Código JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});
Oveja negra
fuente
5

Intente agregar $(document).ready(function(){al principio de su guión y luego });. Además, ¿ divtiene el id correctamente, es decir, como id, no como clase, etc.?

tjons
fuente
3

Asegúrese de que no haya nada en su botón (como un div o una imagen transparente) que impida hacer clic en el botón. Suena estúpido, pero a veces pensamos que jQuery no funciona y todo eso y el problema está en el posicionamiento de los elementos DOM.

vicgilbcn
fuente
o, por ejemplo, índice z!
a darren
3

Puede usar $(function(){ // code });cuál se ejecuta cuando el documento está listo para ejecutar el código dentro de ese bloque.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});
Rakyesh Kadadas
fuente
2

Solo una verificación rápida, si está utilizando un motor de plantillas del lado del cliente, como manubrios, su js se cargará después de document.ready, por lo tanto, no habrá ningún elemento para vincular el evento, por lo tanto, use el controlador onclick o úselo en el cuerpo y comprobar el objetivo actual

Abhinav Singh
fuente
muy cierto, estoy usando flask / jinja y no funciona a menos que use la propiedad onclick en el HTML y desde allí me refiera a una función en mi <script>
Rich Stone