utilizzando jQuery ReplaceWith per sostituire il contenuto di DIV solo lavorare prima volta

Question

Sto utilizzando il seguente jQuery per tirare i nuovi dati e sostituire il contenuto del DIV ListData

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

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

Lo script è innescato da numerosi link sulla pagina, ad esempio:

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

Per qualche motivo lo script funziona solo al primo clic di un collegamento. I clic successivi non aggiornano i dati.

Ho visto varie correzioni ma niente che possa funzionare. Eventuali suggerimenti?

Answer 1

Mi sembra che il problema sia l'utilizzo di replaceWith.

Si sta rimuovendo l'elemento che corrisponde a $('#listdata') alla prima chiamata di replaceWith, quindi gli aggiornamenti successivi non riescono a trovare dove si suppone che i dati vengano inseriti nel documento.

Si potrebbe provare qualcosa di simile

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

o incatenato come questo

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

Answer 2

Prova:

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

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

---

Se i .refresh ancore sono all'interno dell'elemento #listdata, allora la delega è una soluzione più ottimizzata:

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

avrete bisogno di cambiare il href su i tuoi collegamenti a < a href = "#" > ... </a >. Ciò impedisce al browser di aggiornarsi quando fai clic sul link.

Se stai facendo le cose in questo modo, ti consigliamo anche di attaccare un "return false" alla fine del gestore di clic per evitare il bubbling.

Answer 4

Se stai usando replaceWith(), si sta sostituendo #listdata con un elemento del tutto nuovo di zecca.

Se data non è qualcosa come <div id="listdata"></div> allora #listdata scompare dopo lo replaceWith(). Sto pensando che dovresti probabilmente usare html().