1.9 El  método on.

En una página web existen dos tipos de elementos, aquellos que se generan la primera vez que se carga la página y aquellos que se generan como resultado de un evento realizado por el usuario. Es decir aquellos elementos que se generan mientras se esta ejecutando la aplicación en javascript.Todos los eventos en JQuery se aplican a los elementos que se generan al momento de cargar la página y NO A LOS ELEMENTOS QUE SE GENERAN COMO RESULTADO DE LA INTERACCION DEL USUARIO CON LA PAGINA, para poder  aplicar  efectos a estos elementos debemos de utilizar el método on.Para ilustrar un poco mejor el funcionamiento de método on,  supongamos que al presionar un botón con la clase=”crearDiv” se genera un nuevo div con la clase “divDinamico” el cual se añade al body de la página.
El código HTML sería el siguiente:

 <input type=”button” value=”Da click y se generará un div” class=”crearDiv”/>

Y el código usando Jquery para crear el div sería el siguiente:

$(document).ready(function(){
//dando click al botón
         $(“.crearDiv”).click(function(){
//creando div
                var divDinamico=$(“<div class=’divDinamico’>Este div se ha creado de forma dinámica</div>”);
    //añadiendo div al body de la página
         $(“body”).append(divDinamico);
       });
});

Ahora se ve claramente que el div con la clase “divDinamico” es un elemento que se ha creado como resultado de una acción por parte del usuario y que no se creo al momento de cargar la página, de tal manera que si necesitáramos añadirle un comportamiento a este div tendríamos que usar el método on.

Si quisiéramos que el color de texto cambie al momento de que el usuario da click sobre este div, podríamos utilizar el código siguiente:

$(document).on(“click”,”.divDinamico”,function(){
         $(this).css(“color”,”#FF0000”);
});

• La primera parte del código $(document).on(“click”,”.divDinamico”,function(){}); nos sirve para indicar el evento, el elemento al que se aplicará el evento y el programa que se ejecutara cuando suceda el evento. En este caso el evento es click y el elemento al que se aplicará este evento es .divDinamico.
• La segunda parte del código $(this).css(“color”,”#FF0000”); nos sirve para cambiar el color del texto del elemento.

 

De esta forma el código completo queda como sigue:
$(document).ready(function(){
//dando click al botón
         $(“.crearDiv”).click(function(){
//creando div
                var divDinamico=$(“<div class=’divDinamico’>Este div se ha creado de forma dinámica</div>”);
    //añadiendo div al body de la página
         $(“body”).append(divDinamico);
       });
//aplicando efectos al elemento generado dinamicamente
$(document).on(“click”,”.divDinamico”,function(){
         $(this).css(“color”,”#FF0000”);
  });
});