jquery - append - impossible de le selectionner

dagda01 · 26/07/2011, 14h24

Bonjour,

mon problème est assez simple, mais je ne trouve pas de solution malgré mes nombreuses recherches sur le web.

En fait lorsque je crée un élément avec .append .html .text etc. Les éléments créé ne sont pas accessibles depuis mes sélecteurs.

Ce qui est assez logique étant donné qu'ils sont créé après le chargement de la page et donc de mes sélecteurs.

Connaissez-vous une astuce me permettant de palier à ce problème?

Merci =)

Voilà des jours que je cherche sans succès

Bovino · 26/07/2011, 14h28

Tu pourrais donner un exemple ?
Parce que

Code :

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

1
2
$('#toto').append('<div id="tata">Nouveau contenu</div>');
alert($('#tata'));

fonctionne très bien

dagda01 · 26/07/2011, 14h37

Oui bien sur, voilà un exemple

On crée l'élément quand on clique sur création_element

Code :

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

1
2
3
4
 
$('#creation_element').click (function () {
	$("#conteneur").append ("<p class='test'>Test</p>")
});

Une fois créé, j'aimerais que cet élément soit lui-même cliquable

Code :

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

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

Code complet

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
28
29
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="js/jquery-ui/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$('#creation_element').click (function () {
			$("#conteneur").append ("<p class='test'>Test</p>")
		});
 
 
	$('.test').click (function () {
		   alert ('ok');
	});
 
	});
</script>
</head>
 
<body>
	<p id="creation_element">creation element</p>
 
    <div id="conteneur">
    </div>
</body>
</html>

Bovino · 26/07/2011, 14h46

Là c'est pas le append qui pose problème mais la logique globale...
Si tu affectes le clic sur un élément qui n'existe pas, ben c'est sûr que ça marche moins bien

Il y a plusieurs solutions pour parer à cela.
* Définir le clic après l'insertion

Code :

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

1
2
3
4
5
6
$('#creation_element').click (function () {
    $("#conteneur").append ("<p class='test'>Test</p>");
    $('.test').click (function () {
       alert ('ok');
    });
});

* Utiliser la méthode live()

Code :

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

$('.test').live('click', function(){...};

* Utiliser la méthode delegate() (plus recommandée que la précédente)

Code :

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

$('#conteneur').delegate('.test', 'click', function(){...});

dagda01 · 26/07/2011, 14h59

super, je ne connaissais pas ces methode.

Un grand merci

Finality · 26/07/2011, 15h07

Bovino j'ai une tite question : pourquoi delegate est plus recommandée que .live ?

Bovino · 26/07/2011, 15h21

Il y a des raisons assez compliquées dues au fonctionnement interne de cette méthode, mais sinon, elle attache l'événement à la racine du document, puis vérifie si la balise qui a reçu l'événement correspond à celui indiqué. Or si l'événement est stoppé (return false, stopPropagation(), ...) avant, il ne sera jamais reçu. Delegate() attache l'événement à la balise qui a appelé la méthode, c'est préférable.

Mais ce n'est qu'un seul des aspects (par exemple, tu ne peux pas utiliser live() à partir d'une méthode de parcours du DOM).

Finality · 26/07/2011, 18h09

Citation:

Envoyé par Bovino

Il y a des raisons assez compliquées dues au fonctionnement interne de cette méthode, mais sinon, elle attache l'événement à la racine du document, puis vérifie si la balise qui a reçu l'événement correspond à celui indiqué. Or si l'événement est stoppé (return false, stopPropagation(), ...) avant, il ne sera jamais reçu. Delegate() attache l'événement à la balise qui a appelé la méthode, c'est préférable.

Mais ce n'est qu'un seul des aspects (par exemple, tu ne peux pas utiliser live() à partir d'une méthode de parcours du DOM).

Ok je te remercie pour ces éclaircissement je n'étais pas allé aussi loin dans l'usage de ces deux fonctions

26/07/2011, 14h24	#1
dagda01 Invité régulier Inscription : avril 2008 Messages : 16 Détails du profil Informations forums : Inscription : avril 2008 Messages : 16 Points : 7 Points : 7	jquery - append - impossible de le selectionner Bonjour, mon problème est assez simple, mais je ne trouve pas de solution malgré mes nombreuses recherches sur le web. En fait lorsque je crée un élément avec .append .html .text etc. Les éléments créé ne sont pas accessibles depuis mes sélecteurs. Ce qui est assez logique étant donné qu'ils sont créé après le chargement de la page et donc de mes sélecteurs. Connaissez-vous une astuce me permettant de palier à ce problème? Merci =) Voilà des jours que je cherche sans succès
	00

26/07/2011, 14h59	#5
dagda01 Invité régulier Inscription : avril 2008 Messages : 16 Détails du profil Informations forums : Inscription : avril 2008 Messages : 16 Points : 7 Points : 7	super, je ne connaissais pas ces methode. Un grand merci
	00

26/07/2011, 15h07	#6
Finality Membre éclairé Webmaster Inscription : septembre 2007 Messages : 376 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmaster Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2007 Messages : 376 Points : 377 Points : 377	Bovino j'ai une tite question : pourquoi delegate est plus recommandée que .live ?
	00

26/07/2011, 15h21	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Il y a des raisons assez compliquées dues au fonctionnement interne de cette méthode, mais sinon, elle attache l'événement à la racine du document, puis vérifie si la balise qui a reçu l'événement correspond à celui indiqué. Or si l'événement est stoppé (return false, stopPropagation(), ...) avant, il ne sera jamais reçu. Delegate() attache l'événement à la balise qui a appelé la méthode, c'est préférable. Mais ce n'est qu'un seul des aspects (par exemple, tu ne peux pas utiliser live() à partir d'une méthode de parcours du DOM). __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email