Transférer des li d'un ul à un autre

Version imprimable

08/10/2012, 13h12
dev14

Transférer des li d'un ul à un autre
Bonjour, j'aimerais pouvoir déplacer des objets dans deux listes simplement :
Code:

1 2 3 4 5 6 7 <ul id="listeA"> <li>obj</li> ... </ul> <ul id="listeB"> </ul>
Je voudrais que lorsqu'on clique sur le li contenant obj, il aille dans la liste B et là pas de problème, je fais :
Code:

1 2 3 4 5 6 7 8 $('ul#listeA li').click(function(){ $('ul#listeB').append($(this).get()); }); // fonction de retour $('ul#listeB li').click(function(){ $('ul#listeA').append($(this).get()); });
Et ça marche. MAIS, j'ai la fonction de retour qui est à l'identique qui ne fonctionne pas par contre ! Savez vous pourquoi?

Merci
08/10/2012, 13h24
SpaceFrog

il sert à quoi le get() ?
08/10/2012, 13h32
dev14

à rien en effet.

bien que ça ne résolve pas le problème hélas.

Code:

1
2
3
4
5
6
7
8
$('#listeA').on('click','li',function(){
   $('#listeB').append($(this));
});
 
// fonction de retour
$('#listeB').on('click','li',function(){
   $('#listeA').append($(this));
});

09/10/2012, 14h14
dev14

Chez moi ça n'a pas marché.

je pense qu'il faudrait plutôt utiliser de l'ajax car le js est chargé et le contenu des ul est chargé une fois. Il ne mémorise pas les changements j'ai l'impression.
09/10/2012, 14h30
Bovino

Regarde la doc de .on() et en particulier la partie sur la délégation d'événements...

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
32
33
34
35
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
<script type="text/javascript">
$(function(){
   $('#listeA').on('click','li',function(){
	 $('#listeB').append($(this));
   });
 
// fonction de retour
$('#listeB').on('click','li',function(){
   $('#listeA').append($(this));
});});
 
</script>
<style type="text/css">
</style>
</head>
<body>
<ul id="listeA">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
</ul>
<ul id="listeB">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
</ul>
</body>
</html>

testé et approuvé ...

10/10/2012, 09h53
devyan

Salut,

Quelle version de jQuery utilises-tu ?

on() a été ajouté à la version 1.7 ...

devyan
10/10/2012, 11h05
dev14

En effet j'ai testé et ça marche sur votre code. Je vais voir pour l'adapter. Merci !

Sinon je sais pour la fonction on(), je suis sous la version 1.8.2.

Merci.