[Résolu] Contenu chargé en AJAX et javascript

Bonjour

Après plusieurs jours à me capilotracter, j'en viens à vous demander un peu d'aide.
Je réalise un blog photo, et plutôt qu'une pagination, j'ai installé un bouton "More" pour charger plus de contenu. Je me suis très largement inspiré de la méthode utilisée pour avoir un "twitter like" (http://blogfreakz.com/tutorial/facebook-and-twitter-pagination/).

J'utilise donc une requête ajax quand l'utilisateur clique sur le lien "more" et j'envois la dernière "id" connue à une page "ajax_more.php" pour qu'elle aille me cherche les suivant dans la limite imposée :

<script type="text/javascript">
$(function() {//When the Dom is ready

$(document).on("click", "a.load_more", function(){ 
var last_msg_id = $(this).attr("id");
//Get the id of this hyperlink 
//this id indicate the row id in the database 
if(last_msg_id!='end'){
    //if  the hyperlink id is not equal to "end"
$.ajax({//Make the Ajax Request
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ last_msg_id, 
beforeSend:  function() {
$('a.load_more').html('<img src="typo/ajax-loader.gif" />');//chargement du loader pdt requete
  
},
success: function(html){//html = the server response html code
    $("#more").remove();//enlever la div more (une autre est chargée dans ajax_load

$("#main").append(html);//On met le contenu du ajax_loader à la suite de la div principale


}
});
  
}

return false;

});
}); 

</script>

Ce code, en lien avec celui de la page load (je la mettrai si vous en avez besoin), marche bien, seulement les données HTML chargées et mise à la suite du contenu ne prennent pas en charge les différents javascript présents dans le head de l'index. Par exemple, je charge un player (sound manager) dans le head, il fonctionne bien au chargement de la page pour les données présentes, mais les données chargées par AJAX ne prennent pas en compte ce javascript...

Donc en gros, je cherche à ré-exécuter les javascript présents dans le head de l'index après chaque renvoi de ajax. Je ne sais pas si j'ai été très clair dans ma demande, n'hésitez pas à me redemander des explications.

Merci d'avance d'avoir pris le temps de me lire en tous cas.
A bientôt
Modifié par TGV70 (08 Aug 2013 - 19:36)

Bonjour,

Tu as la réponse dans ta question, les gestionnaires d'évènement doivent en effet être réinitialisés pour prendre en charge les nouveaux éléments du document. Il faut créer une fonction init(), qui regroupe les gestionnaires d'évènements au minimum, fonction init() que tu lances au début (DOM ready) puis que tu relances a la réception des données ajax (enfin pas tout à fait, il faut attendre que les données soient insérées dans le document, je crois que tu peux utiliser la fonction .ready() de jquery).

Je pense que tu peux aussi simplifier ton code en utilisant la fonction .load() au lieu d'un appel ajax, à voir.

Merci Zebrou, tu m'as mis sur la bonne piste !
En fait, j'ai carrément trouvé une fonction threeSixtyPlayer.init(); pour charger le player.

En fait, j'ai mis ce script à la fin de mon fichier ajax_more.php pour recharger le player, et les bouton like et tweet que proposent facebook et twitter.

<script type=”text/javascript”>

    jQuery(document).ready(function($){

    $(document).ajaxComplete(function(){
    try{
    FB.XFBML.parse();
    twttr.widgets.load();
    threeSixtyPlayer.init();
    }catch(ex){}
    });

    });

    </script>

Ça ne me parait pas très "propre" comme façon de faire ... qu'en dites-vous ?
Merci
@+

Plus proprement, voilà donc le script avec ajax et l'appel aux fonctions javascript dont j'ai besoin :

<script type="text/javascript">
$(function() {//When the Dom is ready

$(document).on("click", "a.load_more", function(){ 
var last_msg_id = $(this).attr("id");
//Get the id of this hyperlink 
//this id indicate the row id in the database 
if(last_msg_id!='end'){
    //if  the hyperlink id is not equal to "end"
$.ajax({//Make the Ajax Request
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ last_msg_id, 
beforeSend:  function() {
$('a.load_more').html('<img src="typo/ajax-loader.gif" />');//Loading image during the Ajax Request
  
},
success: function(html){//html = the server response html code
    $("#more").remove();//Remove the div with id=more
    $("#main").append(html);//Append the html returned by the server .
    FB.XFBML.parse();
    twttr.widgets.load();
    threeSixtyPlayer.init();

}
});

}


return false;


});
}); 

</script>

Merci en tous cas !