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

Question

我有 3 个 div(#col1、#col2 和 #col3)，其中包含包含在 span 标记中的关键字。当用户单击关键字/范围时，它会从 #col1 或 #col2 移出并移至 #col3。然后，当用户单击 #col3 span 项目时，它会移出 #col3 并返回到其原始 div 中。

问题

我可以将关键字移至 #col3，但无法将它们移回。 #col3 不断调用/使用#col1 或#col2 函数。我尝试使用remove()，但这没有帮助。

$("#col1 span, #col2 span").click(function(){
    var tag = this.id;
    //$(this).remove();
    $(this).appendTo('#col3');
    $('#'+tag).wrap("<p></p>");
});
$('#col3 span').click(function(){
    //move back to original div (#col1 or #col2)
    //I can't figure this part out either
});

<div id="col1">
    <span id="tag1" class="marketingkey" >Unilevel</span>
    <span id="tag2" class="marketingkey" >Person-to-Person</span>
    <span id="tag3" class="marketingkey" >Retail Bonuses</span>
    <span id="tag4" class="marketingkey" >Multi-Level/Direct Sales</span>
    <span id="tag5" class="marketingkey" >Binary</span>
    <span id="tag6" class="marketingkey" >Matrix</span>
    <span id="tag7" class="marketingkey" >Hybrid</span>
</div>
<div id="col2">
    <span id="tag8" class="typekey" >Nutritional Supplements</span>
    <span id="tag9" class="typekey" >Super Juices</span>
    <span id="tag10" class="typekey" >Skin Care</span>
    <span id="tag11" class="typekey" >Cosmetics</span>
    <span id="tag12" class="typekey" >Fragrances</span>
    <span id="tag13" class="typekey" >Hair Care</span>
    <span id="tag14" class="typekey" >Jewelry</span>
</div>
<div id="col3">
</div>

Answer 1

尝试使用live事件:

$("#col1 span, #col2 span").live('click', function(){
    var tag = this.id;
    //$(this).remove();
    $(this).appendTo('#col3');
    $('#'+tag).wrap("<p></p>");
});
$('#col3 span').live('click', function(){

});