2人のAjaxがフォームを呼び出すために1つを呼び出し、1つは送信しないようにします。

Question

Ajax経由で送信するフォームに問題があります。 私はまずajax（GET）を使ってHTMLフォームをdivに引き出し、次にajax（POST）を使用してフォームをPHPプロセッサページに送信します。しかし、私はajaxを使用して、別のajax（POST）を介して提出するdivにhtmlフォームを挿入すると、フォームは一度フォームに記入してデータを提出しません！ （どちらの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 
});