I have two lists: the first one is displayed on the left and the second on the right. I want that if I click on an element in the left, he is removed and he is prepended to the right list (and the opposite action)

This is my html:

<div class="cont">
   <div  id="groupL" class="innDiv">
       <div id="1" class="aaaL">Value 1</div>
       <div id="2" class="aaaL">Value 2</div>
   </div>
   <div  id="groupR" class="innDiv">
       <div id="4" class="aaaR">Value 4</div>
       <div id="3" class="aaaR">Value 3</div>
   </div>
</div>

This is the javascript source.

var clickLtoR  = function(n){
   _this = $('#'+n);
   $('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
  _this.remove();

}

var clickRtoL = function(n){
    _this = $('#'+n);
    $('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
    _this.remove();

}

$('.aaaL').click(function(){
    clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
    clickRtoL($(this).attr("id"));
});

If I click for example on "Value1", I need to move this div to the right.

It's works..but if I click again on the same element, for example following the previous example on the "value 1", this have not any associated click event and does not e back on the left list.

How to do to solve this problem and bind the click on the "new element"?

Here, the working code on JSFiddle /

I have two lists: the first one is displayed on the left and the second on the right. I want that if I click on an element in the left, he is removed and he is prepended to the right list (and the opposite action)

This is my html:

<div class="cont">
   <div  id="groupL" class="innDiv">
       <div id="1" class="aaaL">Value 1</div>
       <div id="2" class="aaaL">Value 2</div>
   </div>
   <div  id="groupR" class="innDiv">
       <div id="4" class="aaaR">Value 4</div>
       <div id="3" class="aaaR">Value 3</div>
   </div>
</div>

This is the javascript source.

var clickLtoR  = function(n){
   _this = $('#'+n);
   $('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
  _this.remove();

}

var clickRtoL = function(n){
    _this = $('#'+n);
    $('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
    _this.remove();

}

$('.aaaL').click(function(){
    clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
    clickRtoL($(this).attr("id"));
});

If I click for example on "Value1", I need to move this div to the right.

It's works..but if I click again on the same element, for example following the previous example on the "value 1", this have not any associated click event and does not e back on the left list.

How to do to solve this problem and bind the click on the "new element"?

Here, the working code on JSFiddle http://jsfiddle/uw446/1/

• javascript
• jquery
• html
• onclick
• bind

2 Answers 2

http://jsfiddle/uw446/2/

$("div.el").on("click", function() {
    var $this = $(this);
    if ($this.hasClass("aaaL")) {
        $this.removeClass("aaaL").addClass("aaaR").prependTo("#groupR");
    } else {
        $this.removeClass("aaaR").addClass("aaaL").prependTo("#groupL");
    }
});

You are indeed overplicating this. The above should work flawlessly.

try this..

$('div.cont div div').click(function(){
  var $value = $(this);
  var $parent = $value.parent();
    if($parent.attr('id') == 'groupL'){
      $parent.next('#groupR').prepend($value);
    }else if($parent.attr('id') == 'groupR'){
      $parent.prev('#groupL').prepend($value);
    }
})

http://jsfiddle/uw446/4/