Question

我有一个表单，我使用Javascript和preventDefault提交。一切正常。但是，当我使用AJAX调用以及来自数据库的其他数据检索表单时，表单将不再使用Javascript提交，而是尝试使用正常操作刷新整个页面=＆＃34;＆＃34;和方法=＆＃34; post＆＃34;。似乎由于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",
...

如上所述，当页面加载时页面上显示表单时，一切都很完美。但是一旦我将它包装在一个容器中，最初是＃34;空的＆＃34;，但是在AJAX调用时显示，则preventDefault以某种方式被禁用。

Answer 1

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

.patleLast {
  padding: 10px;
  border-radius: 1000px 0px 1000px 1000px;
  background-color: black;
  width: auto;
  margin: 1px;
}

.patleFirst {
  padding: 10px;
  border-radius: 1000px 1000px 0px 1000px;
  background-color: black;
  margin: 1px;
}

.patle {
  padding: 10px;
  border-radius: 1000px 0px 0px 1000px;
  background-color: black;
}

.topPan {
  position: fixed;
  top: 10px;
  right: 0px;
  color:white;
  font-family: 'Raleway', sans-serif;
  z-index: 1000;
  text-align: right;
}

Answer 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元素ex文档，“body”，“div”，“。class”等

希望这有帮助

使用AJAX

2 个答案: