私は数学の問題のウェブサイトを作成しています。あるページには、ユーザーが送信をクリックする部分があり、答えが正しいか間違っているかをチェックします。
私が問題を抱えているコードの主要部分は次のとおりです。
var newProblem = function(){
var textHide = true;
var submitTimes = 0
$("#content").append("<h2 class='middle_text'>Notice, this page is in BETA stage, improvement is still needed.</h2>")
$(".middle_text").fadeTo(1000,.8)
setTimeout(function(){$(".middle_text").fadeTo(500,0,function(){$(".middle_text").hide()})},4000);
setTimeout(function(){
var denominator = getNumbersEquivFrac.den()
var numerator = getNumbersEquivFrac.num(denominator);
var equivalent = getNumbersEquivFrac.equiv()
var problem = new equivalFrac(numerator,denominator,equivalent);
$("#content").append("<div class ='problem-choice' id='solve'>SOLVE THIS!</div>")
$("#content").append("<div class='problem-choice' id='answer'>SKIP AND GET ANSWER</div>")
$("#content").append("<div style='margin:auto; width:450px; text-align:center'><p id='question'>" + problem.printQuestion() + "</p>")
$("#content").append("<div id='instructions'></div>")
$("#question").fadeTo(750,1);
$(".problem-choice").fadeTo(750,1);
$("#solve").click(function(){
if(textHide === true){
$("#content").append("<form name='answer'><input class='problem-text' type='text' name='answer-input'><input type='button' class='problem-submit' value ='SUBMIT ANSWER'></form>");
$(".problem-text").fadeTo(300,.8)
$(".problem-submit").fadeTo(300,.8)
textHide = false
}
})
},4500)
}
newProblem();
$(".problem-submit").click(function(){
var checkAnswer = function(){
var answer = document.forms["answer"]["answer-input"].value;
if(answer === null || answer === ""){
alert("You must type in an answer.")
}
else{
submitTimes = submitTimes + 1;
if(answer !== problem.answer()){
if(submitTimes < 2){
$("#content").append("<div class='result' id='wrong'><div id='problem-des'><p>The correct answer was " + problem.answer() + "." + "</p></div><button id='next'>NEXT</button></div>");
$(".result").fadeTo(500,1)
}
}
else if(answer===problem.answer()){
if(submitTimes < 2){
alert("Correct!")
}
}
}
}
checkAnswer()
});
これは、フォーム送信ボタンのイベントがある場所です
$(".problem-submit").click(function(){
var checkAnswer = function(){
var answer = document.forms["answer"]["answer-input"].value;
if(answer === null || answer === ""){
alert("You must type in an answer.")
}
else{
submitTimes = submitTimes + 1;
if(answer !== problem.answer()){
if(submitTimes < 2){
$("#content").append("<div class='result' id='wrong'><div id='problem-des'><p>The correct answer was " + problem.answer() + "." + "</p></div><button id='next'>NEXT</button></div>");
$(".result").fadeTo(500,1)
}
}
else if(answer===problem.answer()){
if(submitTimes < 2){
alert("Correct!")
}
}
}
}
checkAnswer()
});
元々htmlドキュメントではなく、コードを介して追加されたセレクターでイベントが呼び出されているという事実であるかどうかはわかりません。
もともとそこにあったページの一部でイベントを呼び出してみましたが、うまくいきました。
しかし、これらの場合は機能していません。理由がわかっている場合は、そう言ってください。