¿Cómo resolver este simple problema de jQuery?

Soy nuevo en jQuery y JavaScript en general. Noté que si insertas un elemento a través de jQuery en el DOM e intentas realizar una acción en ese elemento más adelante, falla. Por ejemplo:¿Cómo resolver este simple problema de jQuery?

Estoy añadiendo una clase de "listenToField" a todos los elementos de accionamiento en la página:

$(function() { 

$('input').addClass('listenToField'); 

});

Entonces cuando agrego la segunda función:

$(function() { 

    $('input').addClass('listenToField'); 

    // second function 
    $('.listenToField').keydown(function() { 

      alert('Hi There') 

    }); 

});

No hace alerta 'Hola allí'.

Sin embargo, si codigo la clase "listenToField" en las entradas HTML, la alerta funciona. ¿Cómo puedo hacer que funcione cuando jQuery inserta la clase dinámicamente sin recurrir a la codificación rígida?

Fuente

2011-05-12 George

Pruebe el método live de jQuery. El método live() asigna eventos a los elementos que existen, y los que se crearán.

http://api.jquery.com/live/

$('.listenToField').live('keydown', function() { 
    alert('Hi there!'); 
})

Fuente

2011-05-12 01:15:42

Genial, pero explica por qué. –

No está creando elementos nuevos, simplemente aplica una clase y luego intenta seleccionarla por clase. ¿No estás de acuerdo con que tiene más sentido saltar la parte de la aplicación de la clase? Supongo que podría haber otra razón por la cual, pero no es aparente en la pregunta. –

increíble, gracias! – George

acaba de cortar al intermediario:

(function() { 
    $('input').keydown(function() { 
      alert('Hi There') 
    }); 
});

Usted está solicitando la clase a todas las entradas de todos modos, por lo que sólo adjuntar el evento KeyDown lugar. Todavía puede aplicar la clase si la necesita para el estilo de CSS también.

Fuente

2011-05-12 01:12:20

Lo simplifiqué para el ejemplo. De hecho, estoy agregando la clase a los campos de entrada que fallaron la validación del formulario. Lo cual agregó un borde rojo a todas esas entradas además de la clase "listToField". Luego, cuando el usuario empiece a completar la información que falta, eliminaré el borde. De todos modos, solo quería saber la solución porque estoy seguro de que aparecerá en otros proyectos. – George

Claro. Mira la información que ChrisW agregó. Debería ayudarlo a que funcione correctamente. –

@ jesus.tesh proporciona una solución correcta, pero la razón de esto no está funcionando como se espera se pueden encontrar here.

Jquery solo funciona en los elementos que existen cuando se carga. Debe realizar más manipulaciones, como se explica en las Preguntas frecuentes, si necesita que funcione contra los elementos que crea.

Fuente

2011-05-12 01:16:14 ChrisW

Buena información, gracias por agregarlo. Es bueno responder la pregunta, pero es mejor enseñar. +1 para usted –

gracias por el enlace, esa página de preguntas frecuentes es muy útil. – George

Otra idea, ¿por qué dar dos pasos? jQuery es encadenable. El valor de retorno de una función jQuery es el objeto jQuery.

$("input").addClass("listenToField").keydown(function() { alert("Hi There"); });

No se exceda con esto. Cuando las cadenas de jQuery son demasiado largas, se vuelven difíciles de leer.

Fuente

2011-05-12 01:30:58

¿Cómo resolver este simple problema de jQuery?

Respuesta

Cuestiones relacionadas