PHP表单提交使用jQuery不工作在一个表内

Question

我有以下函数返回用户的数据:

function returnChild(){
global $pdo;
$stmt = $pdo->prepare("SELECT * FROM children
INNER JOIN districts ON children.ch_district = districts.dst_id
INNER JOIN states ON districts.dst_state = states.st_id
ORDER BY children.ch_id DESC");
$stmt-> execute();
$html = '<div class="row">
<div class="col-md-12 mt-5">
<h2>List of Children <a href="#" class="action btn btn-dark pull-right" data-toggle="modal" data-target="#pickupDetailsModal">+ Add New</a></h2>
<div class="mt-4">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Sex</th>
<th>Date of Birth</th>
<th>Father's Name</th>
<th>Mother's Name</th>
<th>State</th>
<th>District</th>
<th>Action</th>
</tr>';
while($f = $stmt->fetch()){
$html .= '<tr>
<td>'.$f['ch_name'].'</td>
<td>'.ucfirst($f['ch_sex']).'</td>
<td>'.date('jS M, Y', strtotime($f['ch_dob'])).'</td>
<td>'.$f['ch_father'].'</td>
<td>'.$f['ch_mother'].'</td>
<td>'.$f['st_name'].'</td>
<td>'.$f['dst_name'].'</td>
<td>
<div class="row">
<div class="col-md-3">
<span class="text-info pointer" data-toggle="modal" data-target="#childUpdate"><i class="fa fa-edit fa-2x"></i></span>
</div>
<div class="col-md-3">
<form method="post" action="processes/child.php">
<input type="hidden" value="delete" name="type" class="type">
<input type="hidden" value="'.$f['ch_id'].'" name="id">
<button type="submit" class="btnAction no-btn text-danger"><i class="fa fa-trash fa-2x"></i></button>
</form>
</div>
</div>
</td>
<tr>
// THIS FORM IS NOT WORKING
<form method="post" action="processes/child.php">
<input type="hidden" value="update" name="type" class="type">
<input type="hidden" value="'.$f['ch_id'].'" name="id">
<td><input type="text" class="form-control" name="name" value="'.$f['ch_name'].'"></td>
<td><input type="text" class="form-control" name="sex" value="'.ucfirst($f['ch_sex']).'"></td>
<td><input type="text" class="form-control" name="dob" value="'.date('Y-m-d', strtotime($f['ch_dob'])).'"></td>
<td><input type="text" class="form-control" name="father" value="'.$f['ch_father'].'"></td>
<td><input type="text" class="form-control" name="mother" value="'.$f['ch_mother'].'"></td>
<td><input type="text" class="form-control" name="state" value="'.$f['st_name'].'"></td>
<td><input type="text" class="form-control" name="district" value="'.$f['dst_name'].'"></td>
<td><button type="submit" class="btnAction btn btn-dark">Update</button></td>
</form>
</tr>
</tr>';
}
$html .= '</table></div></div></div>';
$html .= returnAJAX();
return $html;
}

returnAJAX()函数:

function returnAJAX(){
$html = '<script>
$(document).ready(function(){
$(".btnAction").on("click", function(e){
e.stopImmediatePropagation();
var form = $(this).closest("form");
var type = form.find(".type").val();
var dataString = form.serialize();
var url = form.attr("action");
alert(dataString);
$.ajax({
type: "POST",
dataType : "json",
url: url,
data: dataString,
cache: true,
beforeSend: function(){
$(".message").hide();
$(".overlay").show();
},
success: function(json){
$(".message").html(json.status).fadeIn();
setTimeout(function(){
$(".message").html(json.status).fadeOut();
}, 3000);
if(json.returnType == "states"){
$("#stateContent").html(json.content).fadeIn();
}else if(json.returnType == "districts"){
$("#districtContent").html(json.content).fadeIn();
}else{
$("#childContent").html(json.content).fadeIn();
}
$(".overlay").hide();
$("html, body").animate({ scrollTop: $(".message").offset().top }, "slow");
}
});
return false;
});
$(".editContent").on("click", function(e){
e.stopImmediatePropagation();
$(".contentHidden").fadeToggle();
$(".contentVisible").fadeToggle();
});
});
</script>';
return $html;
}

问题是第二种形式不起作用。当我单击Update按钮时，alert(dataString)在警告框上没有返回任何内容。警告框出现了，但它是空的，如下面的截图所示:

查看截图

但是，当我将它从表标签(td, tr等)中取出时，它会完美地工作，但当它处于上述格式时则不会。第一种形式工作得很好。第二个表单不检测这里的表单字段。有什么问题吗?我遗漏了什么?我被困在这个问题上2个小时了，没有解决办法。

Answer 1

您想在这行代码中做什么?

`  $(".contentHidden").fadeToggle();

我是说……字符">

在js中，你可以尝试

function actionUpdate(event){
event.stopImmediatePropagation();
var form = $(this).closest("form");
var type = form.find(".type").val();
///code of you
return false;
}
function clickEditContent(event){
event.stopImmediatePropagation();
$(".contentHidden").fadeToggle();
$(".contentVisible").fadeToggle();
}

在html中，你写

<button type="submit" class="btnAction btn btn-dark" onclick="actionUpdate(event)">Update</button>