Jquery将元素从一个div移动到另一个代理车答案

【问题标题】：Jquery moving elements from one div to another acting buggyJquery将元素从一个div移动到另一个代理车
【发布时间】：2011-03-31 02:30:59
【问题描述】：

我有 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>

【问题讨论】：

标签： jquery

【解决方案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(){

});

【讨论】：

这个得到了。感谢您简洁明了的回答。

【解决方案2】：

这应该为您指明再次返回的正确方向。

$("#col1 span, #col2 span").live(function(){
    // Tag the original location
    this.originalLocation = this.parent.id;

    $(this).appendTo('#col3');
});
$('#col3 span').live(function(){
    $('#' + this.originalLocation).append(this);
});

-- 抱歉，以下是错误的，但将其留在这里以供参考，因为它简化了问题--

这是因为您正在移动现有的 DOM 对象（跨度）。连同它必然发生的事件。而是删除并创建新实例，并为您的事件使用“实时”方法来动态连接它们。

或者，将事件“直播”到类名，并在您移动元素时交换类名。

【讨论】：

【解决方案3】：

您需要在 col1/col2 跨度点击事件移动到 col3 后解除绑定，然后重新绑定 #cols3 跨度点击事件。

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

【讨论】：

【解决方案4】：

这会起作用

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

    // now REBIND
    bindCol3();
});
}

function bindCol3() {
$('#col3 span').click(function(){
    //move back to original div (#col1 or #col2)
    //I can't figure this part out either

    // now REBIND
    bindCol1Col2();
});
}

【讨论】：