兩個Ajax調用一個調用窗體和一個提交不工作？

Question

我在通過Ajax提交表單時遇到問題。 我首先使用ajax（GET）將html表單轉換爲div，然後使用ajax（POST）將表單提交到PHP處理器頁面。然而，如果我使用ajax將html表單注入到div中，然後通過單獨的ajax（POST）提交，表單不會提交一次填充的數據！ （兩個Ajax調用彼此獨立工作）任何人都有一個想法，兩個功能不會一起工作？下面

代碼：

$.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 id=\"microsubs_form\" style=\"text-align:center; clear:both\">' + 

     '<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;\" ><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); 
      } 

     }) 




//AJAX POST DATA TO API \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 
    // Variable to hold request 
var request; 

// Bind to the submit event of our form 
$("#microsubs_form").submit(function(event){ 

    // Abort any pending request 
    if (request) { 
     request.abort(); 
    } 
    // setup local variables 
    var $form = $(this); 

    // 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); 


    // Prevent default posting of form 
    event.preventDefault(); 

    // Fire off the request to.php 
    request = $.ajax({ 
     url: "/ms_form_handler.php", 
     type: "POST", 
     data: serializedData, 
     success: function (data){ 
      console.log(data); 
     }, 
     error: function(error) { 
       console.log(error); 
      } 
    }); 

}); 

Answer 1

您試圖綁定到不會在代碼被調用的時候exisit表單的提交事件。

相反，綁定到存在的元素，並通過使用jquerys .on

//#microsubs_form does not exist in the dom at this point 
//$("#microsubs_form").submit(function(event){ 
$("#rdm-below-header").on('form','submit', function(event){ 
    //your ajax submit code 
});