Andrés Smerkin

El Problema

A veces puede surgirnos el problema de que luego de una llamada a AJAX con JQuery, mediante funciones como $.ajax o $.load, algunos de nuestros eventos dejen de funcionar. También puede suceder que a veces mediante Ajax o javascript generemos elementos del DOM a los que queremos asignarles un evento en particular. Pués posiblemente los eventos para estos elementos nuevos no funcionen.

¿Por qué ocurre esto?

Cuando realizamos la llamada a $(‘document’).ready(fn) esta se encarga de inicializar todos nuestros binds para que estén disponibles en nuestras páginas. Entiendase un bind como la funcion .bind(‘event’, fn), la cual tiene shortcuts como .click, .mouseover, etc.

Cuando realizamos una llamada a AJAX, nuestro DOM sufre modificaciones, haciendo que los binds anteriores queden obsoletos. Lo que tenemos que hacer es volver a ejecutar esos binds de los elementos para que vuelvan a estar disponibles después de la llamada AJAX.

Para ser un poco más claros, cuando JQuery carga su método ready(), a los elementos del DOM seleccionados les aplica algo similar a lo que muestra el siguiente ejemplo:

<li onmouseenter="function()..." onmouseleave="...">...</li>

Cuando ocurren las llamadas AJAX esas modificaciones se pierden. Lo que nosotros tenemos que hacer es lograr que JQuery vuelva a cargar los eventos asignados a los elementos del DOM.

Solución

Vamos a ver un pequeño segmento de código:

$('document').ready(function() {
    iniciarBinds();
 
    $.ajax({
          url: "test.html",
          context: document.body,
          success: function(){
               $(this).addClass("done");
               iniciarBinds();
          }
    });
 
    function iniciarBinds() {
        $('#target').click(function() {
               alert('Handler for .click() called.');
        });
 
    }
 
});

En el ejemplo anterior vemos como realizar el rebind mencionado. En la función iniciarBinds() colocamos todos aquellos binds que puedan llegar a sufrir debido a la llamada AJAX. Luego, al principio de la llamada a $(document).ready() llamamos a la funcion iniciarBinds(). El rebinding surge después de la llamada en AJAX, en el caso de “success”. Como podemos ver, nuevamente estamos llamando a la funcion iniciarBinds(). Si no hicieramos esto, los binds creados se perderían a causa de modificaciones de la estructura del DOM, pero con el rebinding los eventos se refrescan para todos los elementos, incluyendo las modificaciones.