Problema de carga de Jquery AJAX

Question

Estoy tratando de cargar todas las páginas de mi sitio web usando el método jQuery .load, así es como se ve mi sitio web:

<script type="text/javascript">  
  $(function() {
    $('.link').bind('click', function(e) {
            var page = $(this).attr('href');
            $('#site').addClass('loading');
            $('#content').load(page, function (){
            $('#site').removeClass('loading');
    });

    e.preventDefault();
    return false;
  });

<a href="test.php" class="link">Test</a>

Con este código, cada enlace que obtiene class = " link " cargará mi página en el div #content. ¡Funciona bien! No hay problemas, pero cuando cargo el test.php, si uso el enlace class = " en cualquier enlace, botón o lo que sea, simplemente no funciona y la nueva página se carga fuera de mi #contenido.

¿Ya trató de copiar esto en el nuevo archivo cargado y no funciona, alguien tiene una pista?

Gracias

Answer 1

Esto se debe a que cuando vincula un evento, solo lo vincula a los elementos que están en el DOM en ese momento. Entonces, si agrega otros nuevos más adelante, no estarán vinculados al evento que adjuntó anteriormente. Suponiendo que tiene jQuery 1.3, tiene una función incorporada para evitar esto llamada live . Con él, puede vincular un evento a todos los elementos actuales y futuros. No es compatible con todos los eventos, pero click sí es compatible.

Entonces, teniendo esto en cuenta, solo tiene que reemplazar esto:

$('.link').bind('click', function(e) {

Con esto:

$('a.link').live('click', function(e) {

(agregué la a. al selector porque es mucho más eficiente especificar la etiqueta si es posible)

Si no tiene jQuery 1.3, debe actualizar lo antes posible. Si no puede, consulte el livequery que logra lo mismo pero en mucho De manera menos elegante. Alternativamente, puede simplemente tener una función para vincular la acción y llamarla cada vez que carga nuevos datos. Sin embargo, teniendo en cuenta todo, jQuery's live es la mejor manera de hacerlo.