Wie lade ich dynamischen Inhalt (jquery) in Ajax-Aufruf?

Question

Meine Homepage lädt Seiten mit jquery ajax call. In der Bilder-Unterseite gibt es 3 div, und jeder lädt auch einen php mit ajax. Ich möchte eine Galerie js zu jeder Unterseite hinzufügen. Die js lädt jedoch nicht. Hier ist mein Code in der index.php für die Unterseiten:

<script type="text/javascript"> 
$(function() 
{ 
    var actualmenu = 'fooldal.html'; 
    $('#tartalom').load('fooldal.html'); 
    $('.fooldal').click(function() 
    { 
    $('#tartalom').load('fooldal.html'); 
    actualmenu = 'fooldal.html'; 
    } 
); 

    $('.kepek').click(function(){ 
$('#tartalom').load('kepek.php', function(){ 
    $(document.body).on('click', 'a[rel=gallery_view]' ,function(){ 
    $(this).KeViewer('gallery', {'percent' : 70}); 
    return false; 
    }); 
}); 
    actualmenu = 'kepek.php'; 
}); 
}); 
</script> 

Und es ist meine kepek.php Seite:

<script type="text/javascript"> 
$(function() 
{ 
    $('#galeria').load('kepek_csenge.php'); 
    $('#csenge').click(function() 
    { 
    $('#galeria').load('kepek_csenge.php'); 
    } 
); 
); 
</script> 

<div id="albums"> 
    <div class="album" id="csenge"> 
     Csenge 
     <br/> 
     <img src="albumok/csenge/01.jpg" alt="csenge"/> 
    </div> 
</div> 
<div style="clear:both;"></div> 
<div id="galeria" width="500"></div> 

Innen kepek_csenge.php gibt es Zeilen wie diese, die die ausgelöst werden soll Galerie:

<a class="thumb_wrapper" href="albumok/csenge/01.jpg" title="Első" rel="gallery_view"><img alt="" class="thumb" src="albumok/csenge/thumbs/01.jpg" /></a> 

Leider lädt es nur eine neue Seite mit dem ausgewählten Bild. Wie kann ich den galleryviewer js auf dieser Seite benutzen?

Answer 1

Es ist wichtig zu verstehen, dass das Dokument, das Sie in war geladen werden ready lange, bevor Sie etwas mit Ajax laden

Dies bedeutet, dass die in $(function() in Ihren Ajax-Seiten eingewickelt Code so schnell ausgelöst wird, wie es auftritt. Wenn dieser Code dem HTML-Code vorangeht, auf den er verweist, findet er diese Elemente nicht, da sie noch nicht existieren.

Versuchen Sie, alle Skript-Tags in den Ajax geladenen Inhalt nach dem HTML zu verschieben.

Es ist im Allgemeinen einfacher, alle Skripte in einen zusammenzufassen und verschiedene Teile in Funktionen zu verpacken und dann diese Funktionen nur im Erfolgsrückruf von load() aufzurufen;

function loadPage(page){ 
    var url = '...' +page; 
    $('#selector').load(url, function(){ 
     initViewer(); 
    }); 
}