Question

我有3个div（＃col1，＃col2和＃col3），其中包含span标签中包含的关键字。当用户点击关键字/ 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

这应该指向你再次回去的正确方向。

$("#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对象（跨度）。随着它必然会发生的事件。而是删除并创建新实例，并使用事件的“实时”方法动态连接它们。

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

Answer 2

尝试使用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(){

});

Answer 3

在重新绑定＃cols3 span click事件之前，您需要取消绑定col1 / col2 span click事件，一旦它移动到col3。

$("#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
});

Answer 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();
});
}

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

4 个答案: