Método Click en elementos creados dinámicamente con Javascript o Jquery

Al crear un elemento dinámicamente con javascript o utilizando jquery nos vemos con un problema, el cual muchas veces es un quebradero de cabeza. Estoy hablando de utilizar el elemento con jQuery utilizando los métodos click(), change(), blur(), etc…

Supongamos que hemos creado un elemento <input type=»button» id=»saveBtn» class=»btn» value=»Guardar» /> por javascript y lo incluimos en el documento con «.append()» o «.html()».

Ahora, queremos añadirle un click() method a nuestro nuevo amigo usando jQuery. NO SE PUEDE!

$('#saveBtn').click(function () {alert($(this).attr("id")); }); 

¿Por qué? Porque a la hora de cargar el documento este elemento no existía. Los métodos solamente se asocian (bind) con los elementos que se cargan en el momento de que el navegador ejecute la carga del DOM (Document Object Model), por lo que jQuery directamente pasa del tema.

La solución

Utilizaremos el método on() para decirle al documento que nos busque el elemento que necesitamos, y asociarle el método click de la siguiente manera:

$(document).on('click', '#saveBtn', function () {
    alert($(this).attr("id"));
});

Para acceder al elemento y utilizarlo, haremos algo parecido, buscando el elemento cuyo atributo «id» sea «saveBtn»:

var dataId = $('[id^="saveBtn"]');

Si queremos acceder utilizando la clase:
var dataId = $('[class^="btn"]');

Para casos extremos en el que no podamos realizar acciones con algunos elementos del documento, os dejo además estos métodos nativos de javascript:

El id del elemento: document.getElementById('saveBtn');

La etiqueta html: document.getElementsByTagName('input');

La clase: document.getElementsByClassName('btn');

El selector: document.querySelectorAll('input.btn');