Discussion :

[R2D22]

Bonjour, j'aimerais cloner sur mon site un contenu qui est chargé à l'aide d'Ajax avec ".load()", voici le code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="mesimageschargees"></div>
<div id="monimageclonee"></div>

et le code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$( "#mesimageschargees" ).load( "/mapageloadee.html" );
$( "#mesimageschargees img" ).click(function() {
  $( "#monimageclonee img" ).remove();
  $(this).clone().appendTo("#monimageclonee");
});

Au final l'image n'est pas clonée. Par contre si j'utilise le même code mais sans AJAX alors l'image est clonée.. Une solution ? Merci d'avance !

[Bovino]

C'est tout à fait normal, la fonction .load() va charger de façon asynchrone du contenu HTML. Ca veut dire que ton code va exécuter l'instruction qui suit sans attendre d'avoir reçu le HTML attendu, du coup, le gestionnaire d'événement que tu déclares derrière ne s'applique pas aux éléments qui vont apparaitre dans le code quand la requête AJAX aura reçu la réponse. Mais si tu regardes la signature de .load() dans la doc, tu verras qu'elle peut prendre en paramètre une fonction de rappel qui s'exécutera dès que la requête aura répondu.

[R2D22]

Merci pour ta réponse !
Cela marche avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$( "#mesimageschargees" ).load( "/mapageloadee.html" , function(){
$( "#mesimageschargees img" ).click(function() {
  $( "#monimageclonee img" ).remove();
  $(this).clone().appendTo("#monimageclonee");
});
});

On ne peut pas charger load de manière synchrone, en revanche on peut outre-passer en faisant passer la fonction à "l'intérrieur" du .load().