我正在通过ajax基于一些下拉菜单显示表单。用户可以在一个下拉列表中选择类(class),在另一个下拉列表中选择主题,从而返回该类(class)的学生列表。
其格式类似于允许用户输入学生已获得的科目分数的形式。这是用户选择其偏好后表单的外观:
我希望当单击保存按钮并且用户输入分数后,应将其发送到数据库。 问题是:因为每当我单击按钮时我都会通过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>
关于javascript - 使用ajax返回表单后按钮将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44245701/