Jquery move element from a div to another
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 come 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.net/uw446/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");
}
});
You are indeed overcomplicating 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.net/uw446/4/
链接地址: http://www.djcxy.com/p/42550.html上一篇: 上下移动UI Li中的物品