Un «problema» con el que todo novato de la programación con jQuery se encuentra tarde o temprano (y las listas de correo lo demuestran) es que el contenido cargado (o generado) dinámicamente no dispara los manejadores de eventos asignados en $(document).ready.
Y, hoygan, esto es de lo más normal.
Si repasamos nuestra forma habitual de trabajar con jQuery, y reflexionamos un poquito…
$(document).ready(function() {
$('selecciono.algo')
.bind('click', hazCosasBonitas);
});
… recordaremos que estamos utilizando $(document).ready porque no podemos seleccionar elementos que no existen. De ahí que tengamos que esperar a disponer de un árbol DOM completo. De ahí que los manejadores de eventos no afecten a elementos nuevos.
¿Entonces?
Opciones las hay adecuadas a unos casos y a otros. La más sencilla, para casos sencillos, es inicializar los contenidos nuevos una vez los hayamos insertado en el documento.
Necesitamos, pues, una función que nos permita seleccionar y actuar dentro de un contexto. Recuerda que jQuery provee de selecciones basadas en contexto. Si utilizas
$('a');
seleccionarás todos los enlaces del documento. Pero si usas
$('a', unElementoSelecto);
seleccionarás los enlaces descendientes de unElementoSelecto.
Por tanto, podemos crear nuestra función de inicialización según contexto como sigue.
function initLinks(context) {
$('a', context)
.bind('click', hazCosasBonitas)
}
Que ejecutaremos desde nuestro manejador para $(document).ready, pasando el documento como contexto de búsqueda:
$(document).ready(function() {
initLinks(document);
});
Así que estamos como al principio… pero mucho más cerca del final. Lo único que nos queda por hacer es ejecutar initLinks cuando recuperemos nuevo contenido. Si usamos load, el más simplón de los métodos Ajax de jQuery, basta con usar una función de callback:
function loadNewContent() {
$('#holder').load('ajax-content.html #response p', function() {
// `this` apunta al elemento que acabamos de rellenar
initLinks(this);
});
}
Y esta es la idea básica, que he reflejado en esta pequeña demo en latín.
Por supuesto, hay otras opciones. Si eres de los que para clavar un clavo usa un plugin, échale un vistazo a LiveQuery; si tienes un serio trasiego de elementos vivos, mejor apostar por la delegación de eventos. Pero esas son otras historias que contaré a su debido momento.
Me lo explica Manolito en un comentario.
Tu eres gilipollAS. Déjate de comentarios estúpidos y expón las cosas con rigor, que toda esa parafernalia q te montas para explicar algo con tus chistecillos sólo sirven para dejar al descubierto lo inutil que eres a la hora de entender conceptos. Por cierto te limitas a copiar lo que lees en artículos en inglés. Y tú te consideras un programador…eres un engañabobos . Esos comentarios tipo ‘cool’ y tío culto no esconden más q un flagrante cenutrio con muy poca capacidad explicatoria y olvidas detalles siempre importantes. Dedícate a otra cosa porque explicar, lo haces como el culo. Por cierto, si con tus gracias , pretendes que la peña te diga “eres genial tío”, vas listo. Seguro que toda tu vida has sido un pringado y ahora q has encontrado esto de los blogs, lugar donde cualquier comentario de un mediocre como tú, le hace parecer inteligente. Valiente mameluco eres….
No tengo palabras.
El equipo de desarrollo de jQuery ha publicado la versión 1.2 de la biblioteca. Incorpora algunas novedades que justifican sobradamente el cambio de minor version.
- Selectores
Se incorporan :has(), :header y :animated. Desaparecen los selectores XPath (si los necesitas, puedes usar el plugin de compatibilidad con XPath) y, aprovechando la ocasión, la sintaxis para los selectores por atributo usa sintaxis CSS. Así, a[@class=jfgi] se convierte en a[class=jfgi].
- Atributos
El método val() ha sido mejorado y ahora permite recuperar el valor de elementos SELECT y marcar y desmarcar checkboxes.
- Navegación por el DOM
Nuevos métodos. map() permite la transmutación alquímica de la colección. prevAll() y nextAll() recuperan, respectivamente, los hermanos (siblings) mayores y menores (o anteriores y siguientes, como se prefiera). slice() corta la colección a gusto del consumidor. hasClass('una-clase‘) nos dice si el elemento tiene o no asignada una-clase. andSelf() combina dos colecciones apiladas. contents() recupera los nodos hijos, incluidos los nodos de tipo texto.
- Manipulación
Llegan wrapAll() y wrapInner(). clone() trae una gran novedad: usando clone(true) los elementos clonados mantienen los manejadores de eventos del original.
- Posición
Aterriza offset(), que nos devuelve las coordenadas de un elemento tomando como origen la esquina superior izquierda del viewport. height() y width() también sirven ahora para obtener el tamaño de la ventana y el documento.
- AJAX
Ahora load() permite cargar de modo muy sencillo pedazos de HTML. Usa un selector a continuación de la URL para indicar el filtro: $('#links').load('/Main_Page #p-Getting-Started li'). Con getScript() podemos cargar scripts desde otros dominios, lo que autoriza a getJSON() a utilizar servicios web basados en JSONP. El método serialize() ha sido reescrito para permitir la serialización sencilla de formularios. Se ha incorporado a $.ajax() la opción cache que fuerza el refresco de los datos solicitados.
- Efectos
Ya podemos utilizar valores en em o porcentajes en las animaciones. El plugin (oficial) Color Animations permite realizar animaciones de colorines. stop() detiene las animaciones. Llegan stop(), queue(), dequeue(), las animaciones relativas, las personalizadas y otras maravillas.
- Eventos
El nuevo método triggerHandler() dispara los manejadores de eventos asignados a un elemento sin activar el comportamiento por defecto del elemento. Llegan los eventos con espacio de nombres.
Todos los detalles en jQuery 1.2: jQuery.extend(”Awesome”).
La versión 1.1.4 de jQuery, publicada a finales de agosto, incluye, como es costumbre, algunas mejoras en el rendimiento, pero también (y esto no es tan habitual) algunas novedades interesantes que merece la pena conocer.
Continúa leyendo Novedades en jQuery 1.1.4
Abrir nuevas ventanas no es buena idea. Usar target="_blank" tampoco lo es. Pero usar scripts mal pensados y peor escritos para abrir enlaces en ventanas popup es lo peor de lo peor.
Así que, si a pesar de las advertencias de los libros sagrados vas a abrir un popup usando javascript, muestra un poco de respeto por tus usuarios y hazlo (algo) bien.
Continúa leyendo Ventanas popup con jQuery y un poco de respeto
Hoy vamos a parir un par de iteradores un poco raritos. El primero de ellos infinito. El segundo, aleatorio. Y luego los combinaremos con setInterval. Porque tú lo vales y porque nos serán útiles para presentar información periódicamente. Continúa leyendo Intervalos e iteradores infinitos
Un mensaje de Carlos Campderrós en javaEScript, la lista de correo, me descubre un bug una peculiaridad de JScript (la implementación de ECMAScript que padecemos en Internet Explorer) con el cual no recuerdo haberme enfrentado. En pocas palabras: el método substr no da los resultados esperados cuanto se utiliza un valor negativo como primer parámetro. Continúa leyendo String.substr: bug en Internet Explorer y solución
ECMAScript (javascript para los amigos) es un lenguaje dinámicamente tipado. Pero tipos, haberlos, haylos. Veamos cómo realizar conversiones explícitas a String, Number y Boolean con unos pocos carácteres menos de lo usual. Continúa leyendo Conversión rápida de tipos
¿Alguna vez has cerrado una ventana cuando tenías un formulario a medio rellenar? ¿Has invertido media hora en escribir un email y, por error, has abandonado la página sin enviarlo? Evita a tus usuarios pasar por este trauma –y el de aprender hebreo– usando onbeforeunload. Continúa leyendo onbeforeunload: tiende una mano al usuario