fonction .click sur nouvel élément
Bonjour,
Je débute en javascript et je suis confronté à un problème que je ne comprends pas malgré de nombreuses recherches sur le web.
J'utilise la librairie JQuery.
Voici mon problème: j'ai créé une liste et deux balises:
En cliquant sur Add ou Remove, on peut ajouter des éléments à la liste ou en supprimer grâce à une fonction javascript.
Jusqu'ici, pas de problème, cela fonctionne.
Je vous donne le code pour vous expliquer la suite:
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
30
31
|
<script type="text/javascript">
$(function() {
var i = $('li').size() + 1;
$('#add').click(function() {
$('<li>Ligne ' + i + '</li>').appendTo('ul');
i++;
});
$('#remove').click(function() {
$('li:last').remove();
i--;
});
$('li:last').click(function(){
$('li:last').css('background','blue');
});
});
</script>
</head>
<body>
<ul>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
<li>Ligne 4</li>
</ul>
<a href="#" id="add">Add</a><br />
<a href="#" id="remove">Remove</a> |
J'ai rajouté une fonction qui doit normalement changer le fond en bleu du dernier item de la liste quand on clique dessus. Le problème, c'est que la fonction ne semble pas reconnaître les éléments créés par "appendTo".
En effet, quand on clique sur Add, on obtient une liste de 5 item. Donc normalement, en cliquant sur "Ligne 5" le fond devrait être changé en bleu (puisqu'il s'agit du dernier item de la liste) mais ça ne marche pas...
En cliquant sur "Ligne 4" par contre, on a bien "Ligne 5" qui a le fond qui passe en bleu. Donc il semble que .click() ne fonctionne pas sur les nouveaux éléments créés par appendTo(). Comment faire pour qu'en cliquant sur le dernier élément, celui ci ait le fond qui passe en bleu (en gros, pourquoi la fonction ne fonctionne pas sur les éléments créés par appendTo() alors qu'elle fonctionne sur les éléments de la liste initialement dans le html)
Merci d'avance pour votre aide.
