1

我使用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 选择）的 jsFiddle：http: //jsfiddle.net/Moonlight/fRHhh/1/

怎么了？我认为“appendTo”会复制所有内容。

编辑：我创建了一个我想要实现的新示例：http: //jsfiddle.net/Moonlight/fRHhh/5/

4

1 回答 1

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');
    }
});
于 2013-03-11T18:31:19.410 回答