我正在基于一些下拉菜单通过ajax显示表单。用户可以在一个下拉菜单中选择班级，而在另一个下拉菜单中选择科目，依次返回该班级的学生列表。
它以类似形式的格式格式化，允许用户输入学生已获得的科目分数。用户选择首选项后，表单将如下所示：
我想单击保存按钮，并在用户输入分数后将其发送到数据库。问题是：因为每当我单击按钮时，我都会通过ajax返回记录，所以什么也没有发生。对于基本测试，我尝试显示Javascript警报并在单击按钮时将消息记录到控制台，但是尝试时什么也没有发生。
这是我的代码的样子：（脚本）
<script>
$(document).ready(function() {
$('#subject_id').on('change', function(){
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
$('#class_id').on('change', function(){
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
$('#term').on('change', function() {
/* Act on the event */
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
// testing is done down here
$(document).on('submit', '#st_score_form', function(event) {
event.preventDefault();
// this is where I'm testing if the button is working
alert("Button click");
console.log("Button click");
});
});
</script>
这是返回格式的文件（includes / ajax / read_student_score_form.php）
if (mysqli_num_rows($result) > 0) {
# code...
$output .= '<h4 align="center">Periodic Report</h4>';
$output .= '<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th scope="row" colspan="1">Subject</th>
<td colspan="5">'.$subject["subject_name"].'</td>
<th scope="row">Class</th>
<td>'.$class['class_name'].'</td>
<th scope="row">Period</th>
<td>'.$period.'</td>
</tr>';
$output .= '</table>';
$output .= '<table class="table table-bordered table-condensed table-responsive table-striped">
<thead>
<tr>
<th>Student</th>
<th>Score</th>
<th>Operations</th>
</tr>
</thead>';
$output .= '<tbody>';
while ($row = mysqli_fetch_array($result)) {
# code...
$output .= '<form action="#" method="post" id="st_score_form">';
// unseen post values that will be send
$output .= '<tr style="display: none;">';
$output .= '<td><input type="text" name="student_id" value="'.$row['student_id'].'"></td>';
$output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
$output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
$output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
$output .= '</tr>';
// -- end of unseen post values
$output .= '<tr>';
$output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
$output .= '<td><input type="number" min="59" max="100" name="score" class="form-control"></td>';
$output .= '<div class="form-group">';
$output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
$output .= '</div>';
$output .= '</tr>';
$output .= '</form>';
}
$output .= '</tbody>';
$output .= '</table>';
$output .= '</div>';
echo $output;
} else {
echo "Data not found";
}
我愿意就如何进行这项工作提供反馈和建议。谢谢！！！
参考方案
JS生成的DOM元素不再由您的代码触发。您必须创建一个文档事件，以便JS生成的DOM元素可以正常运行。
$(document).on('event','selector',callback_function)
**编辑**
也许我给您一个小例子，说明我打算如何编写您的代码。您遇到的问题是，如果使用JS / jQ创建一个元素，则您的DOM已被您的javascript / jquery代码解析，并且无法识别您新创建的DOM。
这很好用：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '#st_score_form', function(event) {
event.preventDefault();
alert("Button click");
});
$('body').append('<button id="st_score_form">Testbtn</button>');
});
</script>
<html>
<head></head>
<body>
No content
</body>
</html>
这行不通
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#st_score_form').click(function(event) {
event.preventDefault();
alert("Button click");
});
$('body').append('<button id="st_score_form">Testbtn</button>');
});
</script>
<html>
<head></head>
<body>
No content
</body>
</html>
在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…
保留文本区域的数据或值，然后选择输入 - javascript通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…
带有AJAX和DOM处理API的下拉菜单 - javascript我从API获取数据，但未在我的下拉菜单中显示。如果我用?act=showprovince回显，结果就在那里。example.html<head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> …
尽管刷新，jQuery格式仍未应用于Ajax数据 - javascript我正在通过GET响应消息从服务器（php文件）的可折叠内部加载列表视图。但是，尽管刷新了jQuery元素，但jQuery格式并未应用于添加的HTML。我的页面在这里：http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码（仅相关代码）<script> lastRecor…