Enlazar eventos a elementos HTML añadidos de forma dinámica con jQuery

Si tienes definido en JavaScript un evento de esta forma:

$("a[product-id]").click(edit_product);

function edit_product(event) {
    ...
}

Al añadir elementos (nodos) de forma dinámica (después de una llamada AJAX por ejemplo) que cumplen el selectori al HTML DOM usando .append() o .html(), el evento no funcionará con ellos. Esto se debe a que el elemento se ha añadido DESPUÉS de la llamada que enlaza el evento con la función que se quiere ejecutar.

Para asegurarse de que todos los elementos que cumplen el selectori van a lanzar el evento hay que usar .on() por ejemplo con el antecesor $(document):

$(document).on('click', "a[product-id]", edit_product);

jquery-logo

Ref: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements

You might also like

Exponer de forma global valores de config.yml en las plantillas de Twig en aplicaciones Symfony2
Supongamos que has creado un bundle que tiene una configuración específica dentro del fichero config.yml...

Poner el pathname completo de una instalación JDK al ejecutar Oracle SQL Developer
Al ejecutar Oracle SQL Developer por primera vez te pedirá que le indiques la ruta donde tienes instalada...

Crear un pendrive USB arrancable de Ubuntu con una ISO desde Ubuntu
Lo primero que necesitamos es descargarnos la ISO de Ubuntu. Lo segundo es conectar la unidad USB y descubrir...

Ejecutar código PHP en una shell interactiva
Expliqué hace poco cómo ejecutar código PHP diréctamente en la consola de comandos, pero cuando lo...

Dejar un comentario?

0 Comentarios.

Deje un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.