Archivos de Categoría: JavaScript

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