jQuery étendant les fonctions jquery au contenu chargé dynamicment

J’ai des problèmes pour appeler les fonctions jQuery après avoir remplacé le contenu d’un div en utilisant .html () et la méthode .on (). Après avoir visité de nombreuses pages, je suis certain que le problème provient de l’utilisation incorrecte de la méthode .on (), mais je ne peux pas comprendre ce qui ne va pas. Le problème est que le curseur de l’interface utilisateur jQuery ne fonctionne pas après le chargement du contenu HTML. Je pense que la solution pourrait être assez simple, mais je ne trouve pas la bonne réponse alors que des centaines de personnes ont le même problème

J’utilise un élément div comme corps pour afficher le contenu des autres éléments div.

 load content 
static content with working UI slider
loaded content where the UI slider is not working

J’utilise ce code jQuery pour charger dynamicment le contenu HTML (et le curseur)

 $(".slider").slider(); $("body").on("click", "a", function(event) { event.preventDefault(); var htmlContent = $($(this).attr("content")).html(); $("div#body").html(htmlContent); }); 

Le code peut être trouvé sur: http://jsfiddle.net/zTRFj/1/

Vous sérialisez le code HTML afin que les anciens éléments soient tous détruits puis reconstruits à leur nouvel emplacement.

Au lieu d’appeler .html() pour obtenir le code HTML en tant que chaîne, appelez .contents() . Cela retournera les éléments réels et conservera tous les événements et références liés:

 $(".slider").slider(); $("body").on("click", "a", function(event) { event.preventDefault(); var htmlContent = $( $(this).attr("content") ).contents(); $("div#body").html(htmlContent); });