1

jQuery Chosenプラグインを使用しており、ユーザーがチェックボックスの近くにいるときに、完全なDiv コンテンツを別の div に移動しようとしています。

問題は、チェックボックスをクリックすると、div が正しくレンダリングされず、Chosen 情報が失われ、結果が醜いことです。

私が持っている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/

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 に答える