使用 AJAX 检索表单时，Javascript 表单提交 PreventDefault 不起作用

Question

我有一个表单，我使用 Javascript 和 PreventDefault 提交该表单。一切正常。但是，当我使用 AJAX 调用与数据库中的其他数据一起检索表单时，表单将不再使用 Javascript 提交，而是尝试使用正常的 action=""和 method="post"刷新整个页面。似乎由于 AJAX 调用，preventDefault 被某种方式禁用了？

AJAX 调用从数据库获取表单和其他数据:

<a href="#" onClick="return false" onmousedown="javascript:loadnames('<?php echo $postid;?>');">Load Names</a>

<div id="form-container"></div>
<!-- is empty, but contains the form upon ajax call above-->

AJAX 检索 HTML 表单并使用 Javascript 提交:

<div id="form-container">
<!--let user add a name to DB not contained in DB list below-->
<form method="post" action="" id="addnameform">
<input name="name" id="name" type="text" value=""/>
<input type="submit" name="add-name-submit" value="Add"/>
</form>
<!--get a list of names from DB-->
<?php
$sql = "SELECT * FROM names ORDER BY name ASC";
$query = mysqli_query($connection, $sql);
while ($row = mysqli_fetch_array($query)) { 
$name = $row["name"];
echo ...
} // end while
?>
</div><!--end-container-->

用于提交上面 HTML 表单的 JavaScript:

$("#addnameform").submit(function(event) {
event.preventDefault();
var $form = $("#addnameform");
var name = $form.find( "input[name='name']" ).val();
$.ajax({
url: "ajax.php",
type: "POST",
... 

如上所述，当页面加载时表单显示在页面上时，一切都会完美运行。但是，一旦我将它包装到容器中(该容器最初是“空的”，但在 AJAX 调用时显示)，preventDefault 就会以某种方式被禁用。

Answer 1

您必须将提交事件绑定(bind)到您的正文(或从一开始就存在的任何其他父 DOM)

$("body").on('submit', '#addnameform', function(event) {
    //...
});