Issue with moving list items with jQuery -

i've been trying figure out day, haven't been making progress. want have 2 lists, , move list items between them double-clicking. can work if have 1 event "click", , other "dblclick", that's not want. if attach "dblclick" events in both methods, list items won't move , reorder in current list. here's jsfiddle demonstrates problem. have setup 1 event "click" , other "dblclick". if change parameter in live function "click" matches other handler you'll see issue i've been having.

html

<div id="orig"> <ul>     <li class="original">one</li>     <li class="original">two</li>     <li class="original">three</li> </ul> </div> <div id="moved">     <ul>      </ul> </div> 

css

#orig {     width: 40%;     height: 300px;     overflow: auto;     float: left;     border: 1px solid black; }  #moved {     width: 40%;     height: 300px;     overflow: auto;     float: right;     border: 1px solid black; } 

jquery

$(function() {     $(".original").click(function(){         this.classname = "moved";         $("#moved ul").append(this);     });      $(".moved").live("dblclick", function() {          this.classname = "original";         $("#orig ul").append(this);     });  }); 

here jsfiddle

you can make use of on method, live deprecated:

$("#orig").on("dblclick", "li", function() {     $("#moved ul").append(this); });  $("#moved").on("dblclick", "li", function() {     $("#orig ul").append(this); }); 

http://jsfiddle.net/zmnam/6/

plus can make shorter if set class div containers:

$container = $('.container').on('dblclick', 'li', function(e) {     $container.not(e.delegatetarget).find('ul').append(this); }); 

http://jsfiddle.net/zmnam/7/