CODEWITHSUNDEEP
jquery
Brian C
Brian C

Reputation: 135

Jquery moving elements from one div to another acting buggy

I have 3 divs(#col1, #col2 and #col3) which contain keywords wrapped in span tags. When a user clicks on a keyword/span it moves out of #col1 or #col2 and into #col3. Then when the user clicks on #col3 span item it moves out of #col3 and back into it's original div.

PROBLEM

I can get the keywords to move to #col3 but I can't move them back out. #col3 keeps calling/using the #col1 or #col2 function. I tried using remove() but that didn't help.

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

Upvotes: 2

Views: 1181

Answers (4)

Slappy
Slappy

Reputation: 4092

This should point you in the right direction for going back again.

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

-- Apologies, below this is wrong but will leave it here for reference as it simplifies the problem --

It is because you are moving the existing DOM object (the spans). Along with the events it is bound to. Rather delete and create new instances and use the "live" method for your events to wire them up dynamically.

Alternatively, "live" the event to a class name and swap the class name when you move the element.

Upvotes: 1

Andre Pena
Andre Pena

Reputation: 59336

This will work

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

Upvotes: 0

Corey Sunwold
Corey Sunwold

Reputation: 10254

Try using live events: 

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

});

Upvotes: 1

Mark
Mark

Reputation: 5720

You need to unbind the col1/col2 span click event once its moved to col3 before rebinding the #cols3 span click event.

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

Upvotes: 0

Related Questions