我在提交第一份表单后出现的表单时遇到问题。第一个表单提交并根据输入的数字在下面创建一个新表单。当提交新出现的第二个表单时，另一个函数应该在表单下方显示一些文本，但没有任何反应。它曾经在我点击提交后消失，但我在第二个表单的代码中添加了 onsubmit="return false;"，现在第二个表单留在屏幕上，但提交功能没有触发。
表格的目的：
1st Form - 输入班级的学生人数
第二形式 - 输入学生姓名和级别(根据第一个表格中提交的数量为每个学生创建输入)
** 第二个表单提交，然后应该显示输入的学生姓名和级别供用户查看(现在它什么都不做，但应该给出方向 - 学生信息将添加到下一个代码中)在最终提交之前。
我对编码比较陌生，所以请彻底解释。
使用 twitter-bootstrap、jquery 构建
$('#secondsStep').hide();
$('#studentListResponse').hide();
//First submit function on the team form gives the user a response
$( "#teamForm" ).submit(function( event ) {
event.preventDefault();
const numberOfStudents = parseInt($("#numberOfStudents").val());
let responseHTML = '<p class="responseText">';
if (numberOfStudents % 4 === 0){
responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
}
else if (numberOfStudents % 4 === 1) {
responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.'
}
else if (numberOfStudents % 4 === 2) {
responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.'
}
else {
responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.'
}
responseHTML += '</p>'
$('#studentNumberResponse').css('display', 'block').html(responseHTML);
//second submit function on the team form that makes the second form (studentsForm)
}).submit(function(event) {
event.preventDefault();
const numberOfStudents = parseInt($("#numberOfStudents").val());
let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">';
let i = 0;
do {
i++;
responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
} while (i < numberOfStudents);
responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students.</small> </div>';
$('#secondsStep').show().html(responseHTMLSecond);
$('#numberOfStudents').val('');
});
//submit function on the studentsForm to show a response
$('#studentsForm').submit(function(event) {
event.preventDefault();
let responseHTMLThird = '<h4 class="card-title">Step 3: Review Class Roster</h4> <p class="card-text">Review your class roster before moving on to the next step.</p>';
responseHTMLThird += '';
console.log('This is working somehow');
$('#studentListResponse').show().html(responseHTMLThird);
});* {
box-sizing: border-box;
}
#studentNumberResponse {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OnPoint Team Generator</title>
<meta name="description" content="OnPoint Team Generator">
<meta name="author" content="MeganRoberts">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="card">
<h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
<div class="card-block">
<h4 class="card-title">Step 1: Number of Teams</h4>
<p class="card-text">How many students do you have in your class?</p>
<form id="teamForm">
<div class="form-group">
<input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
</div>
<button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
</form>
</div>
</div>
<div class="card">
<div class="card-block" id="studentNumberResponse">
</div>
</div>
<div id="secondsStep" class="card">
</div>
<div class="card">
<div class="card-block" id="studentListResponse">
</div>
</div>
<script src="app.js"></script>
</body>
</html>一个朋友能够帮助我解决这个问题。由于加载页面时表单不存在，因此我的函数不起作用。他建议的更改是在按钮中添加一个onclick="function"，以便在创建它然后单击我的函数时可以工作。
//First submit function on the team form gives the user a response
$( "#submitTeams" ).click(function( event ) {
event.preventDefault();
const numberOfStudents = parseInt($("#numberOfStudents").val());
const divideByFour = numberOfStudents % 4;
let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">';
if (divideByFour === 0){
responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
}
else if (divideByFour === 1) {
responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.';
}
else if (divideByFour=== 2) {
responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.';
}
else {
responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.';
}
responseHTML += '</p>';
$('#studentNumberResponse').css('display', 'block').html(responseHTML);
//second submit function on the team form that makes the second form (studentsForm)
let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">';
let i = 0;
do {
i++;
responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
} while (i < numberOfStudents);
//here is where the onclick was added to the button
responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students.</small> </div>';
$('#secondsStep').show().html(responseHTMLSecond);
$('#numberOfStudents').val('');
});
//submit function on the studentsForm to show a response
//changed to just a function without an event handler
function addStudentsClicked()
{
let responseHTMLThird = '<h4 class="card-title">Step 3: Review Class Roster</h4> <p class="card-text">Review your class roster before moving on to the next step.</p>';
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
console.log(numberOfStudentsTwo);
alert('Scroll down to review your student roster.');
$('#studentListResponse').show().html(responseHTMLThird);
}* {
box-sizing: border-box;
}
#studentNumberResponse, #secondsStep, #studentListResponse {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OnPoint Team Generator</title>
<meta name="description" content="OnPoint Team Generator">
<meta name="author" content="MeganRoberts">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="card">
<h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
<div class="card-block">
<h4 class="card-title">Step 1: Number of Teams</h4>
<p class="card-text">How many students do you have in your class?</p>
<form id="teamForm">
<div class="form-group">
<input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
</div>
<button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
</form>
</div>
</div>
<div class="card">
<div class="card-block" id="studentNumberResponse">
</div>
</div>
<div id="secondsStep" class="card">
</div>
<div class="card">
<div class="card-block" id="studentListResponse">
</div>
</div>
<script src="app.js"></script>
</body>
</html>