JQuery ne fonctionne pas dans une div chargée par AJAX [Fermé]

Signaler
Messages postés
2
Date d'inscription
samedi 20 octobre 2012
Statut
Membre
Dernière intervention
20 octobre 2012
-
 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
$(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 ^^

3 réponses

Messages postés
327
Date d'inscription
mardi 9 octobre 2007
Statut
Membre
Dernière intervention
31 janvier 2014
41
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 :
$('.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()
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

merci j'ai la meme probleme et .live () a fonctionné merci meerci bc :D
Messages postés
2
Date d'inscription
samedi 20 octobre 2012
Statut
Membre
Dernière intervention
20 octobre 2012
1
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 !
A quoi ressemble le contenu chargé par Ajax ? Contient-il des "<script />" ?