jQuery non funziona dopo il caricamento del contenuto tramite AJAX

Question

On this page Ho una finestra popup jQuery e immagini ridimensionabili in miniatura. Se faccio il mouse sulle miniature, le immagini stanno ridimensionando perfettamente. Inoltre, quando clicco sul grande pulsante TV giallo "QuickBook TV" nel footer, il popup appare perfettamente come voglio.

Tuttavia, quando faccio clic sui pulsanti "Avanti" o "Indietro", AJAX viene utilizzato per caricare il nuovo contenuto e il mio jQuery non funziona più per il popup o le immagini di anteprima. Ho cercato un numero di forum in cerca di informazioni su questo problema, ma a causa della scarsa conoscenza di jQuery non sono stato in grado di capire cosa devo fare.

In seguito è la comparsa di jQuery

$(document).ready(function() { 

     $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" }); 
     $(".inline").colorbox({ inline: true, width: "50%" }); 
     $(".callbacks").colorbox({ 
      onOpen: function() { alert('onOpen: colorbox is about to open'); }, 
      onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); }, 
      onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); }, 
      onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); }, 
      onClosed: function() { alert('onClosed: colorbox has completely closed'); } 
     }); 

     //Example of preserving a JavaScript event for inline calls. 
     $("#click").click(function() { 
      $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); 
      return false; 
     }); 
    }); 

e questa è la miniatura jQuery

$(function() { 

var xwidth = ($('.image-popout img').width())/1; 
var xheight = ($('.image-popout img').height())/1; 

$('.image-popout img').css(
     {'width': xwidth, 'height': xheight} 
); //By default set the width and height of the image. 

$('.image-popout img').parent().css(
     {'width': xwidth, 'height': xheight} 
); 

$('.image-popout img').hover(
    function() { 
     $(this).stop().animate({ 
      width : xwidth * 3, 
      height : xheight * 3, 
      margin : -(xwidth/3) 
      }, 200 
     ); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 

    }, //END HOVER IN 
    function() { 
     $(this).stop().animate({ 
      width : xwidth, 
      height : xheight, 
      margin : 0 
      }, 200, function() { 
       $(this).removeClass('image-popout-shadow'); 
    }); //END FUNCTION 

    } 
); 

}); 

Answer 1

I selettori jQuery selezionano gli elementi corrispondenti esistenti nel DOM quando il codice viene eseguito e non si aggiornano in modo dinamico. Quando si chiama una funzione, ad esempio .hover() per aggiungere gestori di eventi, li aggiunge solo a tali elementi. Quando si effettua una chiamata AJAX e si sostituisce una sezione della pagina, si rimuovono quegli elementi con i gestori di eventi associati a essi e li si sostituisce con nuovi elementi. Anche se quegli elementi ora dovessero corrispondere a quel selettore, non vincoleranno il gestore di eventi perché il codice per farlo è già stato eseguito.

I gestori di eventi

In particolare per i gestori di eventi (cioè .click()) è possibile utilizzare la delega evento per aggirare il problema. Il principio di base è che si associa un gestore di eventi a un elemento statico (esiste quando la pagina viene caricata, non viene mai sostituito) che conterrà tutto il contenuto dinamico (caricato AJAX). Puoi leggere ulteriori informazioni sulla delega degli eventi nello jQuery documentation.

Per il vostro gestore di eventi click, il codice aggiornato sarebbe simile a questa:

$(document).on('click', "#click", function() { 
    $('#click').css({ 
     "background-color": "#f00", 
     "color": "#fff", 
     "cursor": "inherit" 
    }).text("Open this window again and this message will still be here."); 
    return false; 
}); 

Che sarebbe associare un gestore di eventi per l'intero documento (così non sarà mai ottenere rimosso fino a quando la pagina di scarica), che reagirà a click eventi su un elemento con la proprietà id di click. Idealmente useresti qualcosa di più vicino ai tuoi elementi dinamici nel DOM (forse uno <div> sulla tua pagina che è sempre lì e contiene tutto il contenuto della tua pagina), dal momento che migliorerà un po 'l'efficienza.

Il problema si verifica quando è necessario gestire .hover().Non c'è un vero evento hover in JavaScript, jQuery fornisce questa funzione come una comoda abbreviazione per associare gestori di eventi agli eventi mouseenter e mouseleave. È possibile, tuttavia, utilizzare la delega evento:

$(document).on({ 
    mouseenter: function() { 
     $(this).stop().animate({ 
      width: xwidth * 3, 
      height: xheight * 3, 
      margin: -(xwidth/3) 
     }, 200); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 
    }, 
    mouseleave: function() { 
     $(this).stop().animate({ 
      width: xwidth, 
      height: xheight, 
      margin: 0 
     }, 200, function() { 
      $(this).removeClass('image-popout-shadow'); 
     }); //END FUNCTION 

    } 
}, '.image-popout img'); 

---

jQuery plugin

che copre le associazioni dei gestori di eventi. Tuttavia, non è tutto ciò che stai facendo. Si inizializza anche un plug-in jQuery (colorbox) e non è possibile delegarli a elementi. Dovrai semplicemente richiamare queste righe quando hai caricato il tuo contenuto AJAX; il modo più semplice sarebbe quella di spostare quelle in una funzione denominata separata che si può quindi chiamare in entrambi i posti (il caricamento della pagina e nella tua AJAX richiede success callback):

function initialiseColorbox() { 
    $(".iframe").colorbox({ 
     iframe: true, 
     width: "1000px", 
     height: "500px" 
    }); 
    $(".inline").colorbox({ 
     inline: true, 
     width: "50%" 
    }); 
    $(".callbacks").colorbox({ 
     onOpen: function() { 
      alert('onOpen: colorbox is about to open'); 
     }, 
     onLoad: function() { 
      alert('onLoad: colorbox has started to load the targeted content'); 
     }, 
     onComplete: function() { 
      alert('onComplete: colorbox has displayed the loaded content'); 
     }, 
     onCleanup: function() { 
      alert('onCleanup: colorbox has begun the close process'); 
     }, 
     onClosed: function() { 
      alert('onClosed: colorbox has completely closed'); 
     } 
    }); 
} 

Answer 2

I suoi gestori eventi vengono persi quando si sostituisce il contenuto. Quando imposti eventi hover, jQuery li sta attualmente configurando sugli eventi nella pagina. Quindi, quando li sostituisci con ajax, gli eventi non sono associati a quegli elementi perché sono nuovi.

Per risolvere questo problema è possibile sia chiamare la funzione che li lega di nuovo o si può invece impostare il gestore di eventi sul documento come in questo answer utilizzando $ (document) .on

In questo modo l'evento è impostato su il documento e tutti i nuovi elementi riceveranno l'evento chiamato.

Answer 3

È possibile utilizzare la funzione completa di jQuery Ajax dopo il recupero elementi modulo dati da qualche parte, si vedrà aggiornata dopo ajax completa

Answer 4

  // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC. 
      $.ajax({ 
      // get a form template first 
      url: "../FPFU/templates/yeni-workout-form.html", 
      type: "get", 
      success: function(data){ 
      // insert this template into your container 
       $(".content").html(data); 
      }, 
      error: function(){ 
       alert_fail.removeClass("gizle"); 
       alert_fail.addClass("goster"); 
       alert_fail.html("Template getirilemedi."); 
      }, 
      complete: function(){ 
       // after all done you can manupulate here your new content 
       // tinymce yükleme 
       tinymce.init({ 
        selector: '#workout-aciklama' 
       }); 
      } 

Answer 5

avuto lo stesso problema prima ero in grado di trovare la soluzione che ha funzionato per me. Quindi se qualcuno in futuro può dargli una possibilità e farmi sapere se era giusto dal momento che tutte le soluzioni che sono riuscito a trovare erano un po 'più complicate di così.

Così come detto da Tamer Durgun, inseriremo il codice all'interno di ajaxStop, quindi il codice verrà ripristinato ogni volta che un evento viene completato da ajax.

$(document).ajaxStop(function() { 

//your code 

} 

ha funzionato per me :)