javascript - 使 HTML 元素在 JQuery 对话框窗口中更新后保持可见

Question

假设我有一个表单，用户需要在其中选择一些字段。

提交后，我想对字段是否被选择进行一些错误检查，如果没有，我将提供一个对话框窗口，说明错误消息以及从对话框窗口内选择/更新字段的可能性。

我可以打开包含包含字段选择的 div 的对话框窗口，但在常规页面中，此 div 将消失。

如何使此 div 在对话框窗口打开或关闭期间和之后保持可见？

请参阅下面或 JSFiddle 处的代码片段

$('#submit').click(function() {

  var $dialog = $('<div></div>')
    .html('You forgot something, update below')
    .dialog({
      title: 'check',
      buttons: {
        OK: function() {
          $(this).dialog("close");
        }
      }
    });

  $dialog.dialog('open');

  $dialog.append($('.classSelector'));


});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

General page to make selection
<div class='classSelector'>
  <p>select car:
    <select>
      <option selected disabled>car type</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </p>
</div>
<p>
  <button id='submit'>Submit</button>
</p>

Answer 1

在 $dialog.dialog('open') 之后执行以下代码:

$dialog.append($('.classSelector').clone());

使用 .clone 将允许您复制整个 classSelector div，但原始 div 仍将在页面上。