la risposta ajax doveva essere assegnata a un div

Question

Sto implementando una galleria di immagini usando una chiamata Ajax.

La chiamata passa un valore e ottiene un codice HTML come risposta. Ho controllato questa risposta ed è corretta.

E se inserisco questo codice in un DIV statico, la galleria funziona senza problemi.

Ma se inserisco il codice con AJAX, quando clicco su un'immagine, si apre nella finestra come un'immagine normale: il pop-up della galleria non funziona.

Quale potrebbe essere la causa di questo problema?

Il codice è il seguente

$.ajax({ 
 

 
    type: 'GET', 
 
    url: 'www.test.com', 
 
    data: { 
 
     type: product, 
 
     use: 'gallery' 
 
    }, 
 
    dataType: 'html', 
 
    success: function(data) { 
 
     $("#dv_gallery").append(data); 
 
    } 
 

 
});

il seguente è il codice HTML nella pagina

<div class="portfolio-adaptive adaptive-three" id="dv_gallery"></div>

Answer 1

meno la galleria (che non si specifica) è completamente basata su CSS, è quasi certamente necessario chiamare una sorta di codice di inizializzazione.

Di solito questo è curata dal codice galleria quando viene caricato:

// This "animates" all gallery DIVs **THAT EXIST NOW** 
<script src="gallery.js"></script> 

Controllare le API galleria. Diciamo che c'è una chiamata $.gallery() per sfruttare un selettore. Quindi si modifica il codice per leggere

success: function(data) { 

    $("#dv_gallery").append(data); 

    // The $('#dv_gallery') below includes also the newly appended data 
    $("#dv_gallery") 
     .not(".already-initialized") 
     .addClass("already-initialized") 
     .gallery(); 
} 

Esempio con una galleria personalizzata basata su .Click()

In questo caso è sufficiente intercettare il click sulle (diciamo) A tag attraverso la delega. In questa ipotesi ora stai facendo qualcosa come

$('#dv_gallery a').on('click', function(event) { 
    ... 
}); 

e questo funziona per quelle A che esistono staticamente. Per farlo funzionare con dinamicamente aggiunto un tag, si dovrebbe fare

$('#dv_gallery').on('click', 'a', function(event) { 
    ... 
}); 

noti che ora si associa l'evento click per #dv_gallery, che esiste, e dirgli di agire come un delegato per appena aggiunto 'un 'tag fornendo un parametro extra a .on().

Esempio con Fancybox:

// Select gallery container 
$("#dv_gallery") 
    // Images are embedded in A tags in Fancybox 
    .find('a') 
    // But we do not want to fancybox already gallerified images 
    .not(".already-initialized") 
    // And we want to mark as gallerified those we process now 
    .addClass("already-initialized") 
    // Everything is ready -- build these new A's into fancyboxes 
    .fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 

Se l'API è abbastanza intelligente per non ri-gallerify un elemento già arricchito, allora non c'è bisogno di aggiungere classi semaforo, ma può semplicemente fare

$("#dv_gallery").append(data); 
$("#dv_gallery").gallery(); 

O se non lo è, ma si sa che si aggiunge una data classe, è possibile utilizzare direttamente che uno come un semaforo:

$("#dv_gallery") 
     .not(".gallery-class") 
     .gallery(); 

Diagnosi di problemi non apparenti con l'HTML restituito

jQuery deve aggiungere correttamente HTML; se non lo fa, controllare il Content-Type del documento restituito, e cercare con

$("#dv_gallery").append($(data)); 

o provare a sostituire tutti i contenuti della galleria:

$("#dv_gallery").html(data); 

In entrambi i casi sarà necessario per reinbuiare qualsiasi codice di inizializzazione della galleria richiesto. Queste ultime due opzioni sono solo diagnostiche, tuttavia, se funzionano, ti dice che c'è qualcosa di strano nell'oggetto restituito.

Answer 2

Hai provato a utilizzare la funzione html() di jquery?

$("#dv_gallery").html(data); 

Answer 3

$("#dv_gallery").html(data);
Sopra il codice sta lavorando per voi

Answer 4

Il problema è che molto probabilmente, anche se il codice non mostra il codice click, non è stato riconosciuto perché è caricato dopo il fatto. Niente a che vedere con il codice della galleria.

In parole semplici, prova a modificare il codice del clic da ad es.

$('.myClass').on('click', function(){ ... }) 

Per

$('body').on('click', '.myClass', function(){ ... }) 

Questa instraderà il clic attraverso il corpo e dovrebbe quindi licenziare il tuo codice di galleria.