jquery - append - impossible de le selectionner

Version imprimable

26/07/2011, 14h24
dagda01

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 :cry:
26/07/2011, 14h28
Bovino
Tu pourrais donner un exemple ?
Parce que
Code:

1 2 $('#toto').append('<div id="tata">Nouveau contenu</div>'); alert($('#tata'));
fonctionne très bien :?

exemple

Oui bien sur, voilà un exemple

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

Code:

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:

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

Code complet

Code:

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>

26/07/2011, 14h46
Bovino
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 :aie:
Il y a plusieurs solutions pour parer à cela.
* Définir le clic après l'insertion
Code:

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:

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

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

Code:

$('#conteneur').delegate('.test', 'click', function(){...});
26/07/2011, 14h59
dagda01

super, je ne connaissais pas ces methode.

Un grand merci :mrgreen:
26/07/2011, 15h07
Finality

Bovino j'ai une tite question : pourquoi delegate est plus recommandée que .live ?
26/07/2011, 15h21
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).
26/07/2011, 18h09
Finality

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 :ccool: