Usando jQuery Vuelvaa para reemplazar el contenido del DIV única de trabajo primera vez

Question

estoy usando el siguiente jQuery para tirar de nuevos datos y reemplazar el contenido del DIV ListData

$(function(){ 
$('.refresh').click(function(event) { 
    event.preventDefault(); 

    $.ajax({ 
     url: "_js/data.php", 
     success: function(results){ 
      $('#listdata').replaceWith(results); 
     } 
    }); 
}); 
}); 

El guión es provocada por numerosos enlaces en la página, como:

<a href="" id="update1" class="refresh">Update 1</a> 
<a href="" id="update2" class="refresh">Update 2</a> 

Por alguna razón, la secuencia de comandos solo funciona en el primer clic de un enlace. Los clics posteriores no actualizan los datos.

He visto varias correcciones, pero nada de lo que pueda hacer funcionar. ¿Alguna sugerencia?

Answer 1

Me parece que su problema es con el uso de replaceWith.

Está eliminando el elemento que coincide con $('#listdata') en la primera llamada de replaceWith, por lo que las actualizaciones posteriores no pueden encontrar dónde se supone que los datos deben colocarse en el documento.

Usted podría intentar algo así como

$('#listdata').empty(); 
$('#listdata').append(results); 

o encadenado como este

$('#listdata').empty().append(results); 

Answer 2

Probar:

$('a.refresh').live('click', function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: '_js/data.php', 
     success: function(data) { 
      $('#listdata').empty().html(data); 
     } 
    }); 
}); 

---

Si los .refresh anclajes están dentro del elemento #listdata, a continuación, la delegación es una solución más optimizada:

var list = $('#listdata'); 

list.delegate('a.refresh', 'click', function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: '_js/data.php', 
     success: function(data) { 
      list.empty().html(data); 
     } 
    }); 
}); 

Answer 3

Tendrá que cambiar el href de sus enlaces a < a href = "#" > ... </a >. Esto evita que el navegador se actualice cuando hace clic en el enlace.

Si está haciendo las cosas de esta manera, también deberá colocar un "return false" al final del controlador de clics para evitar el burbujeo.

Answer 4

Si está utilizando replaceWith(), que está reemplazando #listdata con un elemento nuevo por completo.

Si data no es algo así como <div id="listdata"></div> continuación #listdata está desapareciendo después de la replaceWith(). Estoy pensando que probablemente deberías usar html() en su lugar.