Question

我正在使用jQuery的form plugin异步提交表单。服务器通过设置ajaxForm调用的目标来发回HTML进入div #boardcontainer。这很好。

...
    var options = { 
      target:        '#boardcontainer',    // target element(s) to be updated with server response 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse  // post-submit callback 
      };
    $('#myForm').ajaxForm(options); 
...

问题是，从服务器返回的HTML包含两个div：

<div id="board">
...
</div>
<div id="status">
...
</div>

“＃board”是由服务器预呈现的巨型HTML表。 “#status”是一条短信，理想情况下应该进入#boardcontainer以外的div。

处理这种情况的最佳方法是什么？ jquery可以更改div的父级吗？如果是这样，我可以在提交后回调中更改父级，但我似乎无法找到方法。

Answer 1

在您的成功回调中，您可以使用appendTo重新排列div。或者，您可以返回json并在成功回调中构建div。

 $('#status').appendTo('#realTarget');

编辑：检查后，appendTo会自行执行您需要的操作而不会丢失事件处理程序。

Answer 2

我最终用json构建了div（尽管将div的html嵌入为字符串）

以下是代码：

  $(document).ready(function() { 
    var options = { 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse,  // post-submit callback 
      dataType:      'json'
      }; 
    $('#myForm').ajaxForm(options); 
  }); 

  function showResponse(data)  { 
    $('#statusTarget').html(data.status)
    $('#boardcontainer').html(data.board)

    });

它很有效，每次提交表单时#statusTarget和#boardTarget都会替换为新的html。

使用jquery重新排列div层次结构

2 个答案: