Usar funciones en lugar de eventos con jQuery

En esta entrada pretendo dar a conocer un detalle técnico muy interesante que te va a sacar de más de un apuro en tus momentos de desarrollado con JavaScript o jQuery.

jQuery dispone de distintos métodos que permiten capturar eventos tales como el click del ratón, el pasar por encima el ratón, el cambiar el valor de un selector, etc.

Todos estos eventos son muy útiles en la mayoría de ocasiones para controlar las acciones que puede hacer el usuario en una página Web.

Los eventos en JavaScript son instrucciones que permiten variar el estado de un elemento o de una página después de una acción. Esta acción puede ser accionada por el usuario o llevarse a cabo de forma automática desde el código JavaScript.

Cuando un evento ocurre, la función correspondiente se ejecuta mostrando algún cambio o resultado en pantalla.

Actualmente, los eventos en jQuery se escriben con el prefijo «on», como por ejemplo:

Source code

$('.event').on('click', function() {
    //tu código aquí
});

Al pulsar en un enlace, botón o elemento que contenga la clase «event» se procederá a ejecutar tu código.

Cada evento indica algo que ocurre en algún lugar de la página o en toda la página. El evento en sí registra un cambio de estado de la página o de algún elemento de la misma y pone en marcha un mecanismo que permite ejecutar un proceso.

El principal problema que tienen los eventos es que en algunos casos específicos no funcionan. Sobretodo cuando estás agregando elementos generados dinámicamente desde el mismo código JavaScript.

Te darás cuenta que el HTML agregado en tiempo de ejecución no funciona.

Partiendo del ejemplo anterior, con el evento click. Vamos a crear una lista de elementos con un enlace que dinámicamente crea otro elemento para la lista con su propio enlace.

Por defecto, en el HTML inicial tenemos el primer elemento que sirve de gancho:

Source code

<ul id="events">
    <li>
        <h4>Evento 0</h4>
        <a href="#" class="event">Agregar otro evento</a>   
    </li>
</ul>

Se trata de una lista desordenada de eventos o de lo que te puedas imaginar.

Fíjate en el siguiente script:

Source code

<script>
$(document).ready(function(){
    $('.event').on('click', function() {
        $('ul#events').append('<li><h4>Evento '+$('#content ul li').length+1+'</h4><a href="#" class="event">Agregar otro evento</a></li>');
        return false;
    });
});
</script>

El documento o página Web está esperando a que se haga click en el elmento, botón o enlace que contiene la clase «event».

Al hacer click en uno de estos elementos, agregamos al listado de eventos un nuevo evento también con su enlace para agregar nuevos elementos.

Te darás cuenta en seguida que si pulsas en el enlace del elemento agregado dinámicamente, su enlace no funciona igual que el primer elemento.

¿Cómo se resuelve esto?

Las funciones son uno de los pilares fundamentales en JavaScript. Una función es un procedimiento o conjunto de sentencias que realizan una tarea o calculan un valor.

Para usar una función, en primer lugar debes definirla en algún lugar del ámbito donde se va a llamar.

La función que podemos crear para este ejemplo puede ser la siguiente:

Source code

<script>
function addOtherEvent() {
    $('ul#functions').append('<li><h4>Evento '+$('ul#functions li').length+'</h4><a style="cursor:pointer;" onclick="addOtherEvent();">Agregar otro evento</a>');
    return false;
}
</script>

Estamos definiendo la función addOtherEvent() que simplemente agrega un nueve evento a nuestro listado de eventos. Fíjate bien en el enlace del nuevo evento. Le hemos agregado el atributo «onclick» con la llamada a la función.

La lista de eventos que tendremos inicialmente en el código HTML será algo similar a lo siguiente:

Source code

<ul id="functions">
    <li>
        <h4>Evento 0</h4>
        <a onclick="addOtherEvent();" style="cursor:pointer;">Agregar otro evento</a>   
    </li>
</ul>

Seguramente, este detalle técnico se puede ver más claramente en algún otro tipo de ejemplo pero, en estos días se me ha ocurrido este. Espero que quede claro y puedas aplicarlo a otras situaciones.

Cuando estás programando, lo más lógico es que recurras al uso de los eventos ya prediseñados pero en algunos casos no es la mejor forma de conseguir tu propósito debido providencialmente a la complejidad.

Las funciones permiten ejecutar eventos en situaciones más complejas. La operación que radica en las funciones me ha salvado la vida en más de un proyecto. Espero que esto te pueda servir de ayuda y te salve la vida a ti también.

Los eventos son ideales para cambiar el estado de un elemento y listo pero, en tareas recursivas o iteradas, la funcionalidad se reduce y es muy probable que la ejecución del evento funcione a la primera pero a la segunda vez de problemas y no acabe funcionando.

Según mi experiencia he detectado que esto ocurre cuando la llamada al evento ejecuta algún proceso en el servidor y retorna un suceso. En el proceso de vuelta, los eventos ya no hacen la misma acción.

¿Estás en la misma situación? Comparte tu experiencia y soluciona con el uso de funciones.

Ver demo Descargar