javascript - 提交功能不起作用？

Question

下面。有一个 AJAX 调用，它会拉入 .php 文件来检查人员的 IP 并向他们显示表单，提交后表单应该激活。第二次 AJAX 调用提交数据。然而，当单击提交按钮时，似乎第二个函数没有被激活，最好是在第一次 AJAX 调用成功时调用 formSubmit 函数，然后 onclick 激活该函数:

module.exports = {
  init: function() {
  $.ajax({
    url: "/microsub.php",
    method: 'GET',
    success: function (data) {
      if (data == 1) {
        $('#rdm-below-header').append('<div id=\"modal\" class=\"modalStyle\">' +
              '<div>' +
              '<button type=\"button\" id=\"close\" class=\"close\" data-dismiss=\"modal\" aria-label=\"close\"><span aria-hidden=\"true\">&times;</span></button><br>' +
              '<div id=\"titleText\" style=\" text-align:center; font-size: 24px; margin-top: 15px;\">Fill in your details for 24hr access to Risk.net</div><br>' +
              '<form style="text-align:center; clear:both" id="microsubs_form">' +
              '<input type=\"text\" id=\"ms_firstName\" name=\"ms_firstName\" required placeholder=\"First Name\" style=\"float:left;\" >' +
              '<input type=\"text\" id=\"ms_lastName\" name=\"ms_lastName\" required style=\"float:left; margin-left:20px;\" placeholder=\"Last Name\">' +
              '<input type=\"email\" id=\"ms_email\" name=\"ms_email\" required placeholder=\"Corporate Email address\" pattern=\"^.*(\*barclays|\*barcap.com).*$\" oninvalid=\"this.setCustomValidity(\'Please enter your corporate email\')\" style=\"float:left; margin-top: 10px;\">' +
              '<input type=\"password\" id=\"ms_password\" name=\"ms_password\" required style=\"clear:right; margin-top: 10px; margin-left: 20px;\" placeholder=\"Password\" pattern=\".{6,}\">' +
              '<input type=\"text\" id=\"microsub_flag\" name=\"microsub_flag\" hidden=\"true\">' +
              '<input type=\"submit\"  name=\"submit\" style=\"alignment-adjust:central; margin-top:30px; clear:right;\" class=\"msProcess\" id=\"submit\" onclick=\"formSubmit()\"><br>' +
              '</form>' +
              '<div style=\"text-align:center; clear: both; font-size: 16px; margin-top: 5px; \"><br>' +
              'If you already have a subscription, <a href=\"login\">sign in here.</a>' +
              '</div>' +
              '</div>' +
              '</div>');
      }
      console.log(data);
    },
    error: function (error) {
      console.log(error);
    }
  });

  //Display IP Form

  //On Submit form via AJAX

  // Bind to the submit event of our form
  function formSubmit() {
    $("#microsubs_form").submit(function (event) {
      var request;
      // Abort any pending request
      if (request) {
          request.abort();
      }
      // setup some local variables
      var $form = $(this);
      // Let's select and cache all the fields
      var $inputs = $form.find("input, select, button, textarea");
      // Serialize the data in the form
      var serializedData = $form.serialize();
      // Let's disable the inputs for the duration of the Ajax request.
      // Note: we disable elements AFTER the form data has been serialized.
      // Disabled form elements will not be serialized.
      $inputs.prop("disabled", true);
      // Fire off the request to /form.php
      request = $.ajax({
        url: "/ms_form_handler.php",
        type: "POST",
        data: serializedData,
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        }
      });
      // Prevent default posting of form
      event.preventDefault();
    });
  }
  ;
}};
//On Success Hide form, show success message ask to login
//Set cookie to hide the form
//utility.setCookie(name);

Answer 1

您需要在第一个ajax完成时绑定(bind)事件。尝试添加

formSubmit();

在第一个 ajax 调用的 success 函数中。