jQuery UI对话框剥离表单属性和非窗体元素

Question

我不知道如何用jQuery来解决这个问题。我一直在使用jQuery UI库创建一个带有表单的弹出窗口。

但是，控制表单提交的jQuery代码无法找到表单，因为在对话框创建时，jQuery UI对话框正在从实际表单中删除所有属性。

下面是弹出窗口的简化版本：

并将其转换为具有jQuery的对话框，如下所示：

​

$("#dialog").dialog({
  autoOpen: false,
  show: {
    effect: "fade",
    duration: 250
  },
  hide: {
    effect: "fade",
    duration: 250
  },

  draggable: false,
  resizable: false,
  width: calculatedSize,
  dialogClass: 'fixed-dialog',
  closeOnEscape: true,
  modal: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog" class="about-dialog">
  <div class="dialog-bg-container">
    <div class="header-row">
      <button id="close-button" class="dialog-close">X</button>
    </div>

    <form id="popup-form" action="api/email.php">
      <input id="popup-email" class="email-input spacing-3" type="email" placeholder="Your email here" required><input id="popup-submit" class="submit-button spacing-3" type="submit" value="Sign me up!">

      <div id="popup-form-alert" class="spacing-1"></div>
    </form>
  </div>
</div>

​

在使用Chrome的工具检查代码时，我可以看到表单的" id“和"action”属性被删除，还有带有“弹出表单警报”id的div。如果我注释掉上面的jQuery UI代码，我的表单就不会有任何问题。

要记住的一件事是，我不想使用标准的jQuery UI对话框表单，就像它们的文档(https://jqueryui.com/dialog/#modal-form)上所显示的那样，因为我需要将自定义提交按钮放在我想要的位置。

有没有人对如何阻止jQuery剥离我的表格有任何建议？

非常感谢！

Answer 1

经过更多的调查后，我发现一个重复的对话框形式是问题的原因。在注释掉复制后，jQuery UI对话框将保留我的表单属性。

我仍然不确定为什么jQuery UI决定剥去标记，如果有人能够解释这一点，我会感兴趣的！