fonction .click sur nouvel élément

**tylerr** · 23/02/2009, 23h36

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 :

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

**Braillane** · 24/02/2009, 00h05

c'est normal, le .click sert a "binder" un évenement, c'est a dire que au début on va dire, "tel élement fait telle chose". Il faut que l'élment en question existe au départ et reste, ce n'est pas "dynamique". Pour faire sa en dynamique, jquery 1.3 inclut la fonction "live"

Dans ton cas, "li:last" n'existe pas au départ, donc la foncton ne sert a rien.
il faut remplacer

Code :

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

$('li:last').click(function()....

par

Code :

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

$('li:last').live('click',function()

A priori la sa devrait marché, enfin j'espere ^^

**tylerr** · 24/02/2009, 00h40

Merci pour ta réponse, malheureusement, en changeant le code comme tu me l'as indiqué, ça ne fonctionne pas. En cliquant sur l'item "Ligne 4", déjà créé dans la page avant création des nouveaux éléments, rien ne se passe...
Pourtant, en lisant la doc de jQuery sur live(), il semble bien s'agir de ça...
Merci pour ton aide.

**tylerr** · 24/02/2009, 01h10

Je retire ce que j'ai dit, ça marche très bien, j'avais simplement la version 1.2 de JQuery or la fonction live() n'est apparu qu'à partir de la v1.3, c'est à dire que depuis debut 2009.
Donc merci beaucoup !

PS: Cela veut-il dire qu'il était auparavant impossible de faire ce genre de chose avec JQuery 1.2 ? ?

**marcha** · 24/02/2009, 08h19

Envoyé par tylerr

PS: Cela veut-il dire qu'il était auparavant impossible de faire ce genre de chose avec JQuery 1.2 ? ?

Salut,

Non c'était possible, simplement il fallait réassigner les évènements sur les
nouveaux éléments après les requêtes ajax

**Braillane** · 24/02/2009, 14h53

voila

Avant a chaque fois qu'on créer un élément on réaffectais l'évenement, la sa simplifie la vie

**CaviarNAS** · 30/08/2010, 16h38

Rah les gars j'ai le même pb !
sauf que je ne veux pas binder un événement click ou quoi que ce qoit ...
je veux juste que quand mon élément est créé dans la page il se passe quelque chose (sans interaction utilisateur) ... possible avec live ?

genre
$('table').live('j_existe_dans_le_dom',function(){alert ('table');});

fonction .click sur nouvel élément

jQuery

Discussions similaires

Partager

Partager