jQuery kann kein Formular senden, das mit jQuery geladen wurde

Question

Ich habe jQuery verwendet, um ein Formular von der Seitenleiste zur Hauptseite zu laden. Jetzt möchte ich jQuery verwenden, um dieses Formular zu senden, aber ich habe Schwierigkeiten damit. Ich habe denselben jQuery-Code verwendet, um ein Formular zu übergeben, das nicht mit jQuery geladen wurde. Hoffentlich kann jemand sehen, was ich falsch gemacht habe.

Wie kann ich den folgenden Code ändern, damit er mein Formular abschickt?

LINK, die die Form geladen:

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

JQUERY dieser Form geladen:

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

JQuery Formular abschicken:

$("#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

Um Ereignisse auf dynamisch erstellte Elemente binden Sie die Ereignisse auf einem Elternteil des Elements zu binden:

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