ロードされたページからフォームを送信

Question

ロード済みページ（私はload（）を使用しています）に属しているフォームを送信したいと思います。ボタンの送信をクリックすると何も起こりません。

ロードされたページのHTMLコード：ロードされたページの

<form id="my_form" method="post" > 
     *** some inputs *** 
     <input id="submit_button" type="submit" value="Confirm" /> 
    </form> 

のjQueryコード：

$("#submit_button").on('click', function() {   

    $('#my_form').submit(function(){ 
     var myForm = $(this);  

     $.ajax({ 
      dataType: 'json',    
      type: "POST", 
      url: "../treatment_page.php", 
      data:myForm.serialize(), 
      success: function(data){ 
        if (data.a == true){ 
          parent.$.colorbox.close(); 
        }else{ 
         alert("Problem!"); 
        }   
      } 
     });     
    return false;  

    }); 

}); 

treatment_page.phpはOKですが、それは）フォームが（上usnigしていない私の他の人を扱います。 treatment_page.phpは親フォルダにあります。すべてのjQueryアクションは、このフォームの提出を除いて、ロードされたページスクリプトで正常に動作します。

Answer 1

送信ボタンをクリックすると、フォームにsubmitハンドラが追加されます。送信ボタンクリックハンドラは必要ありません。このコードを親ページに保存し、このスクリプトをloadと一緒にレンダリングするだけで応答は必要ありません。あなたは、あなたがdelegateを使用することができます古いバージョンを使用している場合

$(document).on('submit', '#my_form', function(){ 
     var myForm = $(this);  

     $.ajax({ 
      dataType: 'json',    
      type: "POST", 
      url: "../treatment_page.php", 
      data:myForm.serialize(), 
      success: function(data){ 
        if (data.a == true){ 
          parent.$.colorbox.close(); 
        }else{ 
         alert("Problem!"); 
        }   
      }, 
      error: function(){ 
       //Error handler 
      } 
     });     
    return false;  

}); 

on

はjQueryの1.7で導入されました。これを試して。

$(document).delegate('#my_form', 'submit', function(){ 
     .... 
     .... 
}); 

Answer 2

クリックハンドラの外側でonSubmitハンドラを移動します。

$('#my_form').submit(function(){ 
    var myForm = $(this);  

    $.ajax({ 
     dataType: 'json',    
     type: "POST", 
     url: "../treatment_page.php", 
     data:myForm.serialize(), 
     success: function(data){ 
       if (data.a == true){ 
         parent.$.colorbox.close(); 
       }else{ 
        alert("Problem!"); 
       }   
     } 
    });     
return false;  

});