javascript - jQuery 对话框和 ajax 回传

Question

我网站上的一个页面每 15 秒自动重新加载一次。这是通过使用 jQuery 的 .ajax 函数完成的。

我的问题是，每次用户加载页面时，对话框中的表单都可以正常工作。但是当它被页面本身自动重新加载时，输入被移到表单之外。

互联网上的许多人写道，可以通过将 div 附加到找到的第一个表单中将其移回表单中。我的问题是，当我尝试将我的“输入包装器”移回表单时，我遇到了 hirachy 问题。

有人可以帮忙吗？或者指出替代解决方案？

我的 jQuery 脚本:

<script type='text/javascript'>
  var intval;
  var xmlhttp;
  function init() {
    $('#dialog:ui-dialog').dialog('destroy');
    $('.ui-dialog').dialog({ modal: true, draggable: false, resizable: false, autoOpen: false, open: function(event, ui) { stopTimer(); }, close: function(event, ui) { startTimer(); } });
    $('#targets').dialog({ width: 400, buttons: { 'close': { text: 'Luk', height: '30px', click: function() { $(this).dialog('close'); } }, 'submit': { text: 'OK', class: 'submit', height: '30px', click: function() { $(this).find('form').trigger('submit'); } } } });
    $('#targets" & id2 & "Opener').click(function() { $('#targets').dialog('open'); return false; });
  };
  function startTimer() { intval = setTimeout('ajaxRefresh()', 15000); };
  function stopTimer() { clearTimeout(intval); if(xmlhttp) xmlhttp.abort(); };
  function ajaxRefresh() { xmlhttp = $.ajax({ url: '/', data: {h: 'ok'}, beforeSend: function() { stopTimer(); }, success: function(result) { $('body').html(result); } } }) };
  $(document).ready(function() { init(); startTimer(); $('#targetsFormWrap').parent().appendTo('#targetsForm'); });
</script>

HTML:

<div id='targets' class='ui-dialog' title='The Dialog Title' style='text-align: center; display: none;'>
  <form id='targetsForm' name='targetsForm' method='post'>")
    <div id='targetsFormWrap'>")
      <input id='input1target' name='input1target' type='text' value='' style='width: 95%; />
      <input id='input2target' name='input2target' type='text' value='' style='width: 95%; />
      <input id='input3target' name='input3target' type='text' value='' style='width: 95%; />
    </div>
  </form>
</div>

Answer 1

您正尝试将 targetFormWrap 添加到 targetsForm 吗？所以就这样做:

$("#targetsForm").append($("#targetsFormWrap"));