jQuery选择移动div内容到另一个div

Question

我使用jQuery选择插件，我正试图将完整的div内容移动到另一个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"会复制所有内容。

EDIT:我已经创建了一个我想要实现的新示例:http://jsfiddle.net/Moonlight/fRHhh/5/

Answer 1

我改变了你的jquery，现在它工作得很好。你在哪里移动创建的html插件，而不是使用html创建一个"选择"。在把html放入正确的容器后，我再次调用。chosen，瞧，

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