使用 AJAX 检索表单时，Javascript 表单提交 preventDefault 不起作用答案

【问题标题】：Javascript form submit preventDefault not working when form is retrieved with AJAX使用 AJAX 检索表单时，Javascript 表单提交 preventDefault 不起作用
【发布时间】：2016-01-28 10:41:07
【问题描述】：

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

AJAX 调用以从 DB 中获取表单和其他数据：

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

Javascript 提交上面的 HTML 表单：

$("#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 就以某种方式被禁用。

【问题讨论】：

如果表单是动态创建的，需要使用事件委托...$(document).on('submit', "#addnameform", function(event) {})
作为表单，因此id="addnameform" 在您运行$("#addnameform").submit(function(event) { 时实际上并不存在，我假设.ready 处理程序或类似的处理程序。要么按照@ArunPJohny 的建议进行操作，要么将事件处理程序创建为 AJAX .success 的一部分。将表单插入 DOM 后的方法
@RiggsFolly, 在 DOM 中插入表单后
@RayonDabre 当然，但我想明确表示我应该这么说，所以我编辑了评论。谢谢
感谢大家的帮助！从下面的评论中获取代码！

标签： javascript php ajax form-submit preventdefault

【解决方案1】：

您必须将提交事件绑定到您的主体（或任何其他从一开始就存在的父 DOM）

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

【讨论】：

【解决方案2】：

你需要有一个父 dom 对象，你可以异步加载你的表单，你可以试试下面的 jQuery 代码；

$(function(){
    $("#form-container").append("<form id=\"addnameform\" method=\"post\"><button type=\"submit\">Submit Me</button></form>");

    $("#form-container").on("submit","#addnameform",function(event){
        event.preventDefault();
        alert("Submit fired!");
        //Your business goes here...
        return false;
    });
});

这是一个工作示例：https://jsfiddle.net/1fta504n/2/

PS：#form-container 可以是任何类型的 dom 元素，例如文档、“body”、“div”、“.class”等

希望对你有帮助

【讨论】：