jQueryはjQueryでロードされたフォームを送信できません

Question

jQueryを使用して、サイドバーからメインページにフォームをロードしました。今私はこのフォームを提出するためにjQueryを使いたいと思っていますが、私はそれをするのが難しいです。私は同じjQueryコードを使用して、jQueryでロードされていないフォームを送信しました。うまくいけば、誰かが私が間違ったことを見ることができます。

フォームを送信するために次のコードを変更するにはどうすればよいですか？

<a href="#" id="link1">Exam1</a> 

jQueryのFORM LOADED：

$(document).ready(function(){ 
    $('#link1').click(function(){ 
     $('#show').load('exam.php'); 

    });  
}); 

FORM：

<form action="form.php" id="exam" method="post" > 
    <input type="text" name="new_exam"/> 
    <button id="sub" name="" style="color:#e75618; padding:5px 66px" class="btn btn-default" ><b>Add Exam</b></button> 
</form> 

FORMロード

LINKフォームを送信するのjQuery：

$("#sub").click(function() { 
    $.post($("#exam").attr("action"), $("#exam").serialize(), function(info){ $("#result").html(info); }); 
    clearInput(); 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
    }); 

    $("#exam").submit(function() { 
     return false; 
}); 

function clearInput() { 

    $("#exam")[0].reset(); 

PHP：

$new_exam = $_POST['new_exam']; 

$insert_exam = "insert into examination (exam_title) values ('$new_exam')"; 

$run_exam = mysqli_query($con, $insert_exam); 
if($run_exam){ 
    echo "New Exam inserted"; 
} 

Answer 1

あなたは要素の親にイベントをバインドする必要が動的に作成された要素にイベントをバインドするには、次の

$('body').on('click', '#sub', function(){ 
    $.post($("#exam").attr("action"), $("#exam").serialize(), function(info){ $("#result").html(info); }); 
    clearInput(); 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
}); 

$('body').on('submit', '#exam', function(event){ 
    event.preventDefault(); 
    return false; 
});