Jquery将元素从div移动到另一个

Question

我有两个列表:第一个显示在左侧,第二个显示在右侧.我希望如果我单击左侧的元素,他将被删除,并且他被添加到右侧列表(和相反的操作)

这是我的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>

这是javascript源码.

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"));
});

如果我点击"Value1"上的例子,我需要将此div移动到右侧.

它是有效的..但是如果我再次点击相同的元素,例如按照前面的"值1"示例,则没有任何关联的点击事件,也不会返回左侧列表.

如何解决这个问题并绑定点击"新元素"？

这里,JSFiddle的工作代码http://jsfiddle.net/uw446/1/

Answer 1

http://jsfiddle.net/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");
    }
});

你确实太复杂了.以上应该完美无瑕.