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.
Los muchachos de The Cocktail me han invitado a impartir un taller de jQuery en The Cocktail Academy.
Será el jueves 29 de mayo de 2008, a partir de las las 19.30h en los locales de Salamanca, 17 (Madrid). Si piensas asistir (es gratis), inscríbete cuanto antes en el wiki de los talleres.
Una pista de por donde irán los tiros. Hablaremos de:
- selección de elementos, filtrado, etc.;
- eventos a fondo, incluyendo delegación de eventos y sus ventajas;
- navegación por el DOM;
- algún que otro truquito de lo más chachipiruli.
Y por supuesto, de algunas razones para usar (o no usar) jQuery.
Después del taller, estáis todos invitados a pagarme unas cañas.
Para los que preferíamos la vieja interfaz de consulta de la API de jQuery: jQuery API.
Mike Alsup, autor de jQuery form plugin y otras delicias, nos explica cómo crear un plugin para jQuery que cumpla con las condiciones de: no contaminar el espacio de nombres, acepte opciones (y las extienda), mantenga los límites adecuados entre lo público y lo privado y saque provecho del plugin de metadatos. Ahí es nada: A Plugin Development Pattern.
Llega jQuery UI, una colección de componentes reusables y de alta calidad: jQuery UI: Interactions and Widgets.
Y también la versión 1.2.1 de jQuery, con algunas correcciones de bugs sobre la 1.2.
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”).
Adrien Gibrat ha tenido a bien crear y compartir una chuletita de jQuery (PDF).
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
Amigos: ya está aquí la versión 1.1.3 de mi biblioteca favorita. Novedades: mejora en el sistema de eventos, nuevos selectores (y la recuperación de ~= como selector por atributos con valores separados por espacios), mejoras en las animaciones y, chan ta ta chan, mejoras en la velocidad de la selección de nodos de hasta un 800%.
Léanlo todo, amigos míos, en jQuery 1.1.3: 800%+ Faster, still 20KB.