séléctionner l'id d'une balise ajoutée avec append

**geeksDeve** · 05/04/2012, 13h25

mon problème c'est un problème de id :
hello2 ne s'affiche jamais

voila mon 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!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" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
 
 
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
 $("#left-column .nav #li1project").on('click', function(){
alert('hello1');
 $('#left-column .nav').prepend('<li id="limenu"><a HREF="" TARGET="article">menu principale</a></li>');
  $('#left-column .nav #li1project').remove();
  $('#left-column .nav #li2project').remove();
  $('#left-column .nav').append('<li id="li1text"><a HREF="" TARGET="article" >ajouter un texte</a></li>');
  $('#left-column .nav').append('<li id="li2text"><a class="ls" HREF="" TARGET="article">rechercher un texte</a></li>');
});
 
 
 $("#left-column .nav #li1text").on('click', function(){
 
 alert('hello2');
 
 });
 
});
</script>
 
</head>
<body> 
 
<div style="height: 100px;">
</div>
<div id="left-column">
 
                <h3>Table d'administration</h3>
                <ul class="nav">
                    <li id="li1project"><a HREF="creationProjet.php" TARGET="article">creer projet</a></li>
                    <li id="li2project"><a HREF="rechercheProjet.php" TARGET="article">rechercher un projet</a></li>
 
 
                </ul>
                <a href="#" class="link" >Link here</a>
                <a href="#" class="link" >Link here</a>
 
</div>
 
</body> 
</html>

**eckerdecker** · 05/04/2012, 14h54

Problème classique de délégation d'évènement : quand tu ajoutes ton handler à #li1text, il n'existe pas encore puisqu'il ne sera créé que lorsque tu cliqueras sur #li1project.

Solution :

Code :

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

1
2
3
$("#left-column .nav").on('click', '#li1text', function(){
  alert('hello2');
});

Regardes bien la documentation du .on(), elle est certes longues car .on() rassemble ce qui était .bind(), .live(), .delegate() mais tout est là

**SpaceFrog** · 05/04/2012, 15h00

pas besoin de on ... la balise est appendé juste avant ... elle existe donc au moment de la declaration du click

on sert à declarer le click pour les elements qui n'existent pas encore sur la page

**geeksDeve** · 05/04/2012, 15h08

donc c'est quoi la solution

**geeksDeve** · 05/04/2012, 15h18

merci les développeurs

la solution de eckerdecker marche bien .

**eckerdecker** · 05/04/2012, 15h18

Envoyé par SpaceFrog

pas besoin de on ... la balise est appendé juste avant ... elle existe donc au moment de la declaration du click

Hmm, non, son .on() est en dehors du premier handler et donc exécuté quand le #li1text n'existe pas dans le DOM.

Envoyé par SpaceFrog

on sert à declarer le click pour les elements qui n'existent pas encore sur la page

Non plus, on est une méthode ajoutée en 1.7 qui en fonction des paramètres qui lui sont données fonctionne soit comme .bind(), soit comme .delegate() qui disparaissent en 1.8

**SpaceFrog** · 05/04/2012, 15h56

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(function(){
$("#foo").append('<li id="li1text"><a HREF="afficherTexte.php" TARGET="article" >ajouter un texte</a></li>');
alert( $('#foo li:eq(0)').attr('id') )
})
</script>
</head>
<body>
<ul id="foo">
</ul>

heu ??? là sans on ça marche bien

**eckerdecker** · 05/04/2012, 16h07

Heu ouais mais ton exemple n'a rien de commun avec son problème ...

Il déclare deux handlers click sur deux éléments différents, or il déclare le deuxième sur un élément qui ne sera créé que si le premier handler est executé. Donc quand le deuxième handler est déclaré son élément n'existe pas.

Je pense que tu as mal regardé jusqu'où s’arrêtait le code du premier handler.

séléctionner l'id d'une balise ajoutée avec append

jQuery

Vue hybride

Discussions similaires

Partager

Partager