jQuery Chosen将div内容移动到另一个div

Question

我使用 jQuery Chosen 插件，我试图将完整的 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');
    }
});

我创建了一个带有工作示例（正常选择）和问题（jQuery Chosen）的jsFiddle：http://jsfiddle.net/Moonlight/fRHhh/1/

有什么问题？我认为“appendTo”会复制一切。

编辑：我创建了一个我想要实现的新示例：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');
    }
});