jquery將元素從div移動到另一個

我有兩個列表：第一個顯示在左側，第二個顯示在右側。我想，如果我點擊左側的元素上，他被刪除，他被前置到右側列表（和相反的動作）jquery將元素從div移動到另一個

這是我的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/

來源

2013-07-27 Danilo

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

你確實是這個過於複雜的工作代碼。以上應該完美無缺地工作。

來源

2013-07-27 23:28:25

試試這個..

$('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.net/uw446/4/

來源

2013-07-27 23:54:58 lashab

jquery將元素從div移動到另一個

回答

相關問題