Utilizzando jQuery replaceWith per sostituire il contenuto del DIV lavoro solo primo tempo

Sto utilizzando il seguente jQuery per tirare i nuovi dati e sostituire il contenuto di un DIV listdata

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

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

Lo script si attiva da numerosi link della pagina, come:

<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 click di un link. Scatti successivi e di non aggiornare i dati.

Ho visto varie correzioni, ma nulla che io possa ottenere il lavoro. Qualche suggerimento?

  • Live problema? …
InformationsquelleAutor Paul | 2011-02-14

 

4 Replies
  1. 27

    Mi sembra che il tuo problema è con l’utilizzo di replaceWith.

    Si sta rimuovendo l’elemento che corrisponde $('#listdata') alla prima chiamata di replaceWith, successivi aggiorna riesco a trovare i cui dati sono supposti per essere inseriti nel documento.

    Si potrebbe provare qualcosa di come

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

    o incatenato come questo

     $('#listdata').empty().append(results);
    • Penso che hai colpito il chiodo sulla testa, ma questa volta il fix non funziona
    • Mi dispiace, ho perso che vuoi che a commutazione di replaceWith per aggiungi. Perfetto!
    • Dufel ho lo stesso problema, ancora rinfresca…
    • si dovrebbe aprire una domanda su di esso quindi. Se questa soluzione non funziona per voi, quindi non c’è alcuna differenza in quello che stai facendo.
    • Questo mi ha spinto noci per età e poi finalmente ho lavorato di cosa si trattava. Come per Sam Duello risposta il problema è che replaceWith è la sostituzione di tutto l’html, in modo particolare id (o di classe) è stato repalced quindi, perché la sua non è lì per selezionare una seconda volta!!! La mia soluzione è stata quella di assicurarsi che il sostitutivo HTML ha la classe mi è stata scelta contro per garantire l’ho raccolto un secondo momento
  2. 3

    Se si utilizza replaceWith(), si sta sostituendo #listdata con un nuovo elemento del tutto.

    Se data non è qualcosa di simile a <div id="listdata"></div> poi #listdata sta scomparendo dopo la replaceWith(). Sto pensando che probabilmente si dovrebbe utilizzare html() invece.

  3. 0

    Allora avrai bisogno di cambiare href sul tuo link a <a href=”#”>…</a>. Questo impedisce al browser di rinfrescante quando si fa clic sul collegamento.

    Se stai facendo le cose in questo modo, si vuole attaccare un “return false” al fine di fare clic su gestore per evitare bolle.

    • L’OP utilizza il metodo preventDefault() per disattivare le ancore…
    • Inoltre, bubbling non è un problema qui.
  4. 0

    Provare:

    $('a.refresh').live('click', function(e) {
        e.preventDefault();
    
        $.ajax({
            url: '_js/data.php',
            success: function(data) {
                $('#listdata').empty().html(data);
            }
        });
    });

    Se il .refresh ancore sono all’interno del #listdata elemento, quindi delegazione è più una soluzione 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);
            }
        });
    });
    • Tenete a mente che con il tuo .delegate() soluzione, si sta sostituendo il #listdata elemento di se stesso, si perde il .delegate() gestore. EDIT: Si potrebbe fare list.parent().delegate('#listdata a.refresh','cli...
    • Purtroppo questa è la prima cosa che ho cercato senza fortuna. Penso che Sam risposta è lungo le linee di destra, che in replaceWith è la rimozione di un div. Purtroppo sono ancora senza più vicino alla risposta.
    • Ho aggiornato la mia risposta
    • ma se l’ .aggiorna elementi non all’interno del #listdata elemento, quindi non è necessario utilizzare live/delegato e fare clic su fine.

Lascia un commento