한 div에서 다른 연기 버그로 Jquery 요소를 이동

Question

span 태그에 래핑 된 키워드가 포함 된 3 개의 div (# col1, # col2 및 # col3)가 있습니다. 사용자가 키워드/기간을 클릭하면 # col1 또는 # col2에서 # col3으로 이동합니다. 그런 다음 사용자가 # col3 스팬 항목을 클릭하면 # 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(){ 

}); 

Answer 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 객체를 이동하고 있기 때문이다

을 (스팬) . 그것이 묶여있는 사건들과 함께. 대신 새 인스턴스를 삭제 및 생성하고 이벤트에 "라이브"방법을 사용하여 동적으로 연결합니다.

또는 이벤트를 클래스 이름으로 "실시간"저장하고 요소를 이동할 때 클래스 이름을 교체하십시오.

Answer 3

# cols3 span click 이벤트를 다시 바인딩하기 전에 col1로 이동 한 col1/col2 span click 이벤트의 바인딩을 해제해야합니다.

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