Jquery moving LI elements between unordered lists

Question

I am playing with some jquery moving list items between 2 unordered lists and can kind of get it to work with both

$('#l2 li').click(function(){
  $('#l1).append($(this))
});
$('#l1 li').click(function(){
  $('#l2).append($(this))
});

and

 $('#l1 li').click(function(){
      $(this).detach().prependTo('#l2');
 });

 $('#l2 li').click(function(){
    $(this).detach().prependTo('#l1');  
 });

trouble is that after an element has been moved once it can be moved back to the original list.

I was hoping to use this as some kind of team selector so expect numerous changes to be made with items being added and removed a number of times.

thanks in advance Rob

Answer 1

I am NOT SURE if this will help, but I would try to define events like this:

$('body').on('click', '#l1 li',function(e){
//do the detach baby
});

etc...

In my opinion: my code is using JQuery live event . If you want to do it your way you should refresh event click definition after every prepend/append.