Issue with moving list items with jQuery
<p>I've been trying to figure this out for about a day, but I haven't been making too much progress. I want to have two lists, and move list items between them by double-clicking. I can get it to work if I have one event be "click", and the other "dblclick", but that's not what I want. If I attach "dblclick" events in both methods, the list items won't move and will just reorder themselves in the current list. Here's a JSFiddle that demonstrates my problem. I currently have it setup so one event is "click" and the other is "dblclick". If you change the parameter in the live function to "click" so it matches the other handler you'll see the issue I've been having. </p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="orig"&gt;
&lt;ul&gt;
    &lt;li class="original"&gt;one&lt;/li&gt;
    &lt;li class="original"&gt;two&lt;/li&gt;
    &lt;li class="original"&gt;three&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="moved"&gt;
    &lt;ul&gt;

    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#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;
}
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$(function() {
    $(".original").click(function(){
        this.className = "moved";
        $("#moved ul").append(this);
    });

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

});
</code></pre>

<p>Here is a <a href="http://jsfiddle.net/zmnAm/4/" rel="nofollow">JSfiddle</a></p>
