jQuery的獲選格內容移動到另一格

Question

我使用jQuery的選上插件和我想的完全事業部內容移動到另一個DIV當在複選框接近它的用戶。

問題是，當我點擊複選框時，div不能正確顯示，它會丟失選擇的信息，結果只是很醜。

的HTML我有：

Div A:<br /> 
<div id="divA"> 
</div> 

Div B:<br /> 
<div id="divB"> 
    <div> 
     <input type="checkbox" id="chkChosen" value="1" />&nbsp; 
     <select data-placeholder="Testing" id="selectChosen" class="chzn-select" multiple="multiple" style="width:350px;"> 
      <option value="A">Option A</option> 
      <option value="B">Option B</option> 
      <option value="C">Option C</option> 
     </select> 
    </div> 
</div> 

的JavaScript代碼：

$("#selectChosen").chosen(); 

$('#chkChosen').change(function() { 
    if ($(this).prop('checked')) { 
     $('#divB div').hide().appendTo('#divA').fadeIn('fast'); 
    } else { 
     $('#divA div').hide().appendTo('#divB').fadeIn('fast'); 
    } 
}); 

我創建了一個的jsfiddle既具有工作示例（正常選擇）和問題（jQuery的已選擇）：http://jsfiddle.net/Moonlight/fRHhh/1/

出了什麼問題？我認爲「appendTo」複製了一切。

編輯：我已經創造了什麼，我想實現一個新的例子：http://jsfiddle.net/Moonlight/fRHhh/5/

Answer 1

我改變你的jQuery和現在它工作正常。你在哪裏移動插件創建的HTML，而不是使用HTML創建一個「選擇」。將html放入正確的容器後，我再次調用.chosen e瞧。

$("#selectChosen").chosen(); 

$('#chkChosen').live("change",function() { 
    if ($(this).prop('checked')) { 
     $('#divB').html("");; 
     $('#divA').hide().html('\ 
     <input type="checkbox" checked="checked" id="chkChosen" value="1" />&nbsp;\ 
     <select data-placeholder="Testing" id="selectChosen" class="chzn-select" multiple="multiple" style="width:350px;">\ 
      <option value="A">Option A</option>\ 
      <option value="B">Option B</option>\ 
      <option value="C">Option C</option>\ 
     </select>').fadeIn('fast'); 
    } else { 
     $('#divA').html(""); 
     $('#divB').hide().html('\ 
     <input type="checkbox" id="chkChosen" value="1" />&nbsp;\ 
     <select data-placeholder="Testing" id="selectChosen" class="chzn-select" multiple="multiple" style="width:350px;">\ 
      <option value="A">Option A</option>\ 
      <option value="B">Option B</option>\ 
      <option value="C">Option C</option>\ 
     </select>').fadeIn('fast');   
    } 

     $("#selectChosen").chosen(); 
}); 

$('#chkNormal').change(function() { 
    if ($(this).prop('checked')) { 
     $('#divD div').hide().appendTo('#divC').fadeIn('fast'); 
    } else { 
     $('#divC div').hide().appendTo('#divD').fadeIn('fast'); 
    } 
});