jquery

**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

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

jquery - append - impossible de le selectionner

Discussions similaires

Partager

Partager