jquery 从对话框发布表单

Question

我有一个js函数，它获取html以从 Controller 创建新员工，将其插入表单标签内(用于稍后的.serialize())，然后将此html插入到createDialog div并将此div显示为对话框。

<div id="createDialog" style="display:none;">
</div>

$.get('/Employee/Create',
     function (html) {
        html = "<form id='createEmp'>" + html;
        html = html + "</form>";
        $("#createDialog").html(html);
        $("#createDialog").dialog({
            modal: true,
            width: 500,
            buttons: { "Save": function () { postEmployee(); } },
            close: function (ev, ui) { $(this).dialog('destroy'); }
        });
     });


    function postEmployee() {

        $.post('/Employee/Create',
        $("#createEmp").serialize(),
        function (html) {
            $('#reply').html(html);
        });
    }

这有效，但只能一次。对于下一篇文章，之前文章中的所有表单字段也会添加到当前文章中。 这个问题可以解决吗？

谢谢你!

Answer 1

您还需要删除 <form>您创建的元素，如下所示:

close: function (ev, ui) { $(this).dialog('destroy').empty(); }

您还可以使用 .wrapInner() 使整个函数更加简洁。像这样:

$.get('/Employee/Create', function (html) {
  $("#createDialog").html(html).wrapInner("<form id='createEmp'> />");
  $("#createDialog").dialog({
      modal: true,
      width: 500,
      buttons: { "Save": postEmployee },
      close: function (ev, ui) { $(this).dialog('destroy').empty(); }
  });
});