Sélecteur classe après .load

**CyBeRoN** · 21/04/2015, 11h16

Bonjour, je souhaiterais effectuer des traitements sur une classe qui est chargée via un .load
Est-ce possible ?

Voici un petit exemple :

Mon fichier test.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="container">My container
</div>
 
 
<script>
$(function(){
 
	$(".container").load("html.html");
	$(".test").click(function(){
	alert("test");
	});
 
}); 
 
 
</script>
 
</body>
</html>

Mon fichier html.html

Code :

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

<b class='test'>Wow!</b> Such excitement...

Je voudrais que lorsqu'on clique sur la classe test chargée via le load, l'alert("test") s'exécute.
Une idée ?

Merci d'avance.

**Bovino** · 21/04/2015, 11h21

Lire la doc me semble pouvoir être un bon début, notamment en ce qui concerne les paramètres facultatifs de .load() et plus particulièrement celui appelé complete.

**CyBeRoN** · 21/04/2015, 11h34

Super l'accueil, sinon la doc je l'ai au moins lue 15 fois, sans compter le nombre de recherches incalculables sur Google avant de venir poster ici.
Si j'y avais trouvé une réponse crois moi bien que j'aurais pas perdu mon temps à venir ici...
Maintenant si la réponse est si simple, je crois que ça t'aurais pris moins de temps à la mettre plutôt que de mettre ce commentaire inutile et arrogant.

**Darkaurora** · 21/04/2015, 12h00

Et bien premièrement et pour prendre la défense de Bovino il est vrai que la documentation t'indique une méthode pour t'en sortir.

Code javascript :

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

1
2
3
4
5
$( ".container" ).load( "html.html", function() {
  $(".test").click(function(){
	alert("test");
  });
});

La fonction de callback nommé "complete" dans la documentation permet d'effectuer des actions une fois le chargement du contenu terminé. Je peux comprendre que tu sois passé à côté plusieurs fois mais pourtant c'est bien écrit (et pas besoin de chercher):

complete
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
A callback function that is executed when the request completes.

Pour détailler le problème que tu as rencontré il faut comprendre également que tu déclares un événement sur un objet qui n'existe pas forcément au moment ou tu souhaites l'attacher.

Il existe également une autre solution à ce problème qui est la délégation d'événement:

Code javascript :

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

1
2
3
4
 
$(document).on('click', '.test', function () {
  alert('test');
});

Cette méthode permet d'attacher l'événement 'click' sur le document mais de ne l’exécuter que si il rencontre le filtre '.test'.

En espérant avoir aidé...

**CyBeRoN** · 21/04/2015, 12h08

Super merci Darkaurora, ça répond exactement à ce que je cherchais à faire.

Bonne journée

Sélecteur classe après .load

jQuery

Discussions similaires

Partager

Partager