javascript - jQuery 无法提交使用 jQuery 加载的表单

Question

我使用 jQuery 将表单从侧边栏加载到主页。现在我想使用 jQuery 提交此表单，但我很难做到这一点。我使用相同的 jQuery 代码提交未加载 jQuery 的表单。希望有人能看到我做错了什么。

如何修改以下代码以便它提交我的表单？

加载表格的链接:

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

加载表单的 JQUERY:

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

    });     
});

表格:

<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>

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

要在动态创建的元素上绑定(bind)事件，您必须将事件绑定(bind)在该元素的父元素上:

$('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;
});