JQuery ne fonctionne pas dans une div chargée par AJAX
JHDesigne
Messages postés
2
Statut
Membre
-
bo6reda -
bo6reda -
Bonsoir,
J'ai une page HTML5, qui contient des div dont le contenu est chargé via AJAX au chargement de la page. Dans cette div, j'ai deux slider en page d'accueil.
Les slider fonctionne lorsque le contenu de la page est chargé directement, mais lorsque je charge la page d'accueil depuis une autre page chargé par AJAX, jquery ne fonctionne plus sur cette div, alors que les scripts jquery sont bien deja en mémoire dans le "head".
Le problème est que je ne sais pas pourquoi ça ne marche pas?
je vous donne mon code :
appel ajax
navigation menu :
la div ou le chargemen ajax effectué
je suis vraiment très confus parce que j'ai essayé pendant quatre jours pour résoudre ce bug le plus terrible que j'ai vu !!
Merci d'avance pour votre aide ^^
J'ai une page HTML5, qui contient des div dont le contenu est chargé via AJAX au chargement de la page. Dans cette div, j'ai deux slider en page d'accueil.
Les slider fonctionne lorsque le contenu de la page est chargé directement, mais lorsque je charge la page d'accueil depuis une autre page chargé par AJAX, jquery ne fonctionne plus sur cette div, alors que les scripts jquery sont bien deja en mémoire dans le "head".
Le problème est que je ne sais pas pourquoi ça ne marche pas?
je vous donne mon code :
appel ajax
$(document).ready(function(){
$(".meny a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "includes/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(testStatus);
}
})
return false;
});
});
function afficher(data){
$("#main").fadeOut(500,function(){
$("#main").empty();
$("#main").append(data);
$("#main").fadeIn(1000);
})
}
navigation menu :
<div class="meny">
<ul>
<li><a class="rotated_link" href="index.html">Accueil</a></li>
<li><a class="rotated_link" href="profile.html">profil</a></li>
<li><a class="rotated_link" href="">blog</a></li>
<li><a class="rotated_link" href="">portfolio</a></li>
<li><a class="rotated_link" href="">services et procédure</a></li>
<li><a class="rotated_link" href="">contact </a></li>
</ul>
<span class="logo3" style="margin-top:400px;"><img src="img/LOGO2.png" /></span>
</div>
la div ou le chargemen ajax effectué
<div id="main" class="wrapper clearfix">
<?php
$_GET['p']="index";
if(isset($_GET['p']) && preg_match("/^[a-z0-9]+$/i",$_GET['p'])){
$p=strtolower($_GET['p']);
if(file_exists("includes/$p.html")){
include "includes/$p.html";
}
else{
include "includes/404.html";
}
}
else{
include "includes/404.html";
}
?>
</div>
je suis vraiment très confus parce que j'ai essayé pendant quatre jours pour résoudre ce bug le plus terrible que j'ai vu !!
Merci d'avance pour votre aide ^^
A voir également:
- JQuery ne fonctionne pas dans une div chargée par AJAX
- Div c++ - Télécharger - Langages
- Yggtorrent erreur ajax ✓ - Forum Webmastering
- Remplacer #div/0 par vide - Forum Bureautique
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
- Erreur ajax ✓ - Forum Javascript
3 réponses
Bonjour,
Si tu utilise en jQuery $('.meny a').click(); les actions à effectuer lors du clic seront appliquées pour les liens déjà présents sur la page, mais là, comme tu charge le contenu en ajax, les liens ne sont pas encore présent.
Pour résoudre le problème, il faut remplacer le début de la fonction en utilisant .live, comme ceci :
et le reste ne change pas.
Pour plus d'informations je te conseil de jeter un oeil à la documentation de jQuery sur la fonction .live()
Si tu utilise en jQuery $('.meny a').click(); les actions à effectuer lors du clic seront appliquées pour les liens déjà présents sur la page, mais là, comme tu charge le contenu en ajax, les liens ne sont pas encore présent.
Pour résoudre le problème, il faut remplacer le début de la fonction en utilisant .live, comme ceci :
$('.meny a').live('click', function() {
et le reste ne change pas.
Pour plus d'informations je te conseil de jeter un oeil à la documentation de jQuery sur la fonction .live()
bo6reda
merci j'ai la meme probleme et .live () a fonctionné merci meerci bc :D
bonjour ^^
merci Dj Nam mais j'ai déja essayé .live() + .on() et j'ai essayé aussi une truc de meme genre et je rajoute dans les liens un callback :
onclick="loadScript('js/script.js',SuccessCallback)"
j'ais fais regardé beaucoup de forum et je ne trouve pas de solution meme que j'essayer d'évaluer mon code JS avec eval() ne change rien !
merci Dj Nam mais j'ai déja essayé .live() + .on() et j'ai essayé aussi une truc de meme genre et je rajoute dans les liens un callback :
onclick="loadScript('js/script.js',SuccessCallback)"
j'ais fais regardé beaucoup de forum et je ne trouve pas de solution meme que j'essayer d'évaluer mon code JS avec eval() ne change rien !