通过ajax将表单变量从load <div>传递到同一个<div>中？

Question

I'm trying to pass the variables from the form which was loaded from jquery clicked. Into the same div. I tried test it but none of them works. Here's my script :

Javascript

//login
function login(){
    $('#prop_form').load('inc/prop_form_login.php');
    $('.axn_btn').hide();
}

$(document).ready(function(){
    $("form").on('click', '#submit', function(e){
       e.preventDefault();
       var jsURL = $(this).serialize()+"&lang=$_GET[lang]";
       submit(jsURL);
    });
});

function submit(jsURL){
    $.ajax({
        url:'login_chk.php',
            type :'POST',
            success: function(data){
                $('#prop_form').html(data);
            }
    });
}

HTML

<div id="prop_form">
<div class="axn_btn">
<a onClick="login()">login</a>
</div>
</div>

login_chk.php

<?
session_start();
error_reporting(E_ALL);
print_r($_POST[data]);exit();//for testing purpose
.
.
.
?>

I expect the login form data to display in the #prop_form. But the page refresh with return data from login_chk.php.

Answer 1

Finally, the script is working now. Thank you very much for @khairul.ikhwan and @Hakan Kose. You guys are great!

Here is the script:

//login 
function login(){ 
    $('#prop_form').load('inc/prop_form_login.php', function(){
        $("#login_form").on('click', '#submit', function(e){ 
            e.preventDefault(); 
            var jsURL = $('form').serialize()+"&lang=<?=$_GET[lang]?>"; 
            submit(jsURL); 
        });
    }); 
    $('.axn_btn').hide(); 
} 

function submit(jsURL){
    $.ajax({
        url:'login_chk.php',
            type :'POST',
            data: {data: jsURL},
            success: function(data){
                $('#prop_form').html(data);
            }
    });
}

I can't accept both of your codes in the same post. But please know that you guys are part of the solution.