Jquery将元素从一个div移动到另一个代理越野车

我有3个div（＃col1，＃col2和＃col3），它们包含用span标记包裹的关键字。当用户点击关键字/跨度时，它会移出＃col1或＃col2并进入＃col3。然后，当用户点击＃col3 span item时，它会移出＃col3并返回到原始div。Jquery将元素从一个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>

来源

2011-03-31 Brian C

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

});

来源

2011-03-31 02:35:34

这一个得到它。感谢您提供清晰简洁的答案。 – 2011-03-31 04:28:23

@ bxmas13很高兴为您提供帮助 – 2011-03-31 05:19:41

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

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

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

来源

2011-03-31 02:33:30 Slappy

重新绑定＃cols3 span click事件之前，您需要解除col1/col2 span单击事件的绑定，一旦其移至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 
});

来源

2011-03-31 02:34:21 Mark

这将工作

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

来源

2011-03-31 02:37:05

Jquery将元素从一个div移动到另一个代理越野车

回答

相关问题