jQuery序列化数据输入是空的

Question

我的表单包含一个按钮，当单击时，它显示了一个模式窗口，其中包含输入和 send/ cancel按钮。

我想以此模态形式序列化数据，然后通过Ajax将其发送到远程服务器。

由于某种原因，当我查看控制台时，我看不到序列化数据，我只能看到 Email=

有人可以看我的代码，告诉我我要在哪里做错了什么？这个工作应该工作吗？

html

<form id="feedbackForm">
    <input class="button" id="bad" src="bad.png" type="image">
</form>
<div aria-hidden="true" class="modal" id="modal" role="dialog" tabindex="-1">
    <form id="emailForm">
        <div class="form-group">
            <input class="form-control" name="Email" type="text">
        </div>
        <div class="modal-footer">
            <button class="btn" type="submit">Send</button> 
            <button class="btn" data-dismiss="modal" id="closeModal" type="button">Cancel</button>
        </div>
    </form>
</div>

ajax

<script>
      $(document).ready(function() {
          var request;
          $("#feedbackForm").on("touchstart, click", function(e) {
              e.preventDefault();
              var serializedData = $("#emailForm").serialize();
              $('#modal').modal('toggle');
              $("#emailForm").on("submit", function(e) {
                  e.preventDefault();
                      request = $.ajax({
                          url: "MyURL",
                          type: "post",
                          data: serializedData
                      });
                  request.done(function(response, textStatus, jqXHR) {
                      console.log(serializedData); // displays Email=
                  });
              });
          });
      });
</script>

Answer 1

如果用户单击touchstart

时正确理解

1. 您序列形式
2. 您打开包含表格的模态
3. 您覆盖提交事件以发送您的Ajax

问题是，在用用户数据填充表单之前，您的变量已经获得了该表单的值。(如果他第一次打开模态(

只需从AJAX的函数中获取您的数据，以便在此这样的正确时刻提交：

data: getSerializedData()

和功能

function getSerializedData(){
    return $("#emailForm").serialize();
}