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

Fermé
JHDesigne Messages postés 2 Date d'inscription samedi 20 octobre 2012 Statut Membre Dernière intervention 20 octobre 2012 - 20 oct. 2012 à 01:19
 bo6reda - 16 juil. 2013 à 14:11
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 ^^
A voir également:

3 réponses

Dj Nam Messages postés 327 Date d'inscription mardi 9 octobre 2007 Statut Membre Dernière intervention 31 janvier 2014 41
20 oct. 2012 à 08:06
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 j'ai la meme probleme et .live () a fonctionné merci meerci bc :D
0
JHDesigne Messages postés 2 Date d'inscription samedi 20 octobre 2012 Statut Membre Dernière intervention 20 octobre 2012 1
20 oct. 2012 à 12:46
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 !
1
A quoi ressemble le contenu chargé par Ajax ? Contient-il des "<script />" ?
0