淘汰赛：我们如何动态地将带有淘汰处理程序的绑定div容器移动到另一个div？

Question

我在淘汰时面临某种问题

以下是我使用KO绑定的代码...现在我面临的问题是在windows / document resize上我要将此对话框显示为移动视图上的页面。我要将“jobDialog”div从body转移到另一个div。在窗口大小调整功能上执行此操作会破坏ko绑定...所有连接到它的处理程序都会停止工作。所以，在窗口调整大小时我怎么能让ko处理程序继续工作...（两个ko自定义处理程序是淘汰 - Select2和knockout-Jquery-UI-Spinner）......

在预先感谢您的帮助：）

<!-- Job Dialog -->
<div id="cboxOverlay"></div>
<div class="main-container jobDialogBox" id="jobDialog" style="display: none;">         
<div class="layaway-dialog-main jobDialog">
    <div id="btnClose" class="cboxClose"><img src="images/close_button.png" alt="" /></div>
    <h5><strong data-bind="text: Title"></strong></h5>        
    <div class="layaway-dialog">
        <div class="Job-Dialog-Main" data-bind="foreach: Items">
            <div class="layaway-dialog-inside">
                <div data-bind="if: Type=='Select'">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right">
                            <span class="required" data-bind="if: $data.Mandatory=='true' ">*</span>
                            <select data-bind="options: Option, optionsValue: 'Value', optionsText: 'Text', value: Value"></select>
                        </div>
                    </div>
                </div>
                <div data-bind="if: Type=='Input'">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right"><span class="required" data-bind="if: $data.Mandatory=='true' ">*</span><input type="text" data-bind="value: Value" /></div>
                    </div>
                </div>
                <div data-bind="if: Type=='Checkbox'">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right job-check">
                            <span class="required" data-bind="if: $data.Mandatory=='true' ">*</span>
                            <input id="jobid" type="checkbox" data-bind="value: Value, checked: $root.isCreateLayaway" />
                            <label for="jobid"></label>
                        </div>
                    </div>              
                </div>
                <!-- ko if: $root.isCreateLayaway -->
                <div data-bind="if: Type=='Label'">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right"><p data-bind="text: Value"></p></div>
                    </div>
                </div>
                <!-- /ko -->
                <div data-bind="if: Type=='Textarea'">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right"><span class="required" data-bind="if: $data.Mandatory=='true' ">*</span><textarea></textarea></div>
                    </div>
                </div>
                <div data-bind="if: Type=='Radio'">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right">
                        <span class="required" data-bind="if: $data.Mandatory=='true' ">*</span>
                            <div class="job-radio" data-bind="foreach: Option">
                                <div class="job-radio-lbl">
                                    <input type="radio" data-bind="text: Text, checked:$parent.Value, attr:{'id':Id, 'name': $parent.Text, 'value': Value}" />
                                    <label data-bind="attr:{'for':Id}, text: Text"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- Dialog Inside End -->
            <!-- ko if: !$root.isCreateLayaway() -->
             <div data-bind="if: Type=='Spinner'">
                <div class="job-bottom">
                    <div class="job-dialog-row">
                        <div class="job-dialog-left"><label data-bind="text: Text"></label><span>:</span></div>
                        <div class="job-dialog-right">
                            <!-- <span class="job-input-number"><span class="required" data-bind="if: $data.Mandatory=='true' ">*</span><input id="spinner" name="duplicate" data-bind="spinner: { value: Value, min: 1 }"></span>  -->
                            <input id="" type="number" min="1" step="1" value="1" required="true" />
                        </div>
                    </div>
                </div>
            </div> 
            <!-- /ko -->
        </div>
        <div class="jobDialog-bottomicons">
            <ul>
                <!-- ko if: $root.isCreateLayaway -->
                <li><a href="#"><span class="bilkCopy"></span></a></li>
                <!-- /ko -->
                <li><a href="#"><span class="jobOk"></span></a></li>
            </ul>
        </div>
    </div><!-- End Layaway-Dialog -->
</div><!-- Layaway Dialog Main End -->