Javascript 表单输入上的Jquery单击事件未运行

我正在创建一个数学问题网站，在一个页面中，我有一个用户点击提交的部分，它将检查答案是否正确

以下是我的代码中遇到问题的主要部分：

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()

        });

var newProblem=function（）{
var texthhide=true；
var submitTimes=0
$（“#内容”）.append（“注意，此页面处于测试阶段，仍需改进。”）
$（“.middle_text”）.fadeTo（1000，.8）
setTimeout（function（）{$（“.middle_text”）.fadeTo（500,0，function（）{$（“.middle_text”）.hide（）}，4000）；
setTimeout（函数（）{
变量分母=getNumbersEquivFrac.den（）
var分子=getNumbersEquivFrac.num（分母）；
var当量=getNumbersEquivFrac.equiv（）
var问题=新的等价物（分子、分母、等价物）；
$（“#内容”）.append（“解决此问题！”）
$（“#内容”）.append（“跳过并获取答案”）
$（“#content”）.append（“
”+problem.printQuestion（）+”
”）
$（“#内容”）。追加（“”）
$（“#问题”）。法德托（750,1）；
$（“.problem choice”）。法德托（750,1）；
$（“#求解”）。单击（函数（）{
如果（textHide==真）{
$（“#内容”）。追加（“”）；
$（“.problem text”）.fadeTo（300.8）
$（“.problem submit”）.fadeTo（300.8）
textHide=false
}
})
},4500)
}
新问题（）；
$（“.problem submit”）。单击（函数（）{
var checkAnswer=函数（）{
var answer=document.forms[“answer”][“answer input”].value；
如果（答案===null | |答案===“”）{
提醒（“您必须键入答案。”）
}
否则{
submitTimes=submitTimes+1；
if（答案！==problem.answer（））{
如果（提交时间<2）{
$（“#content”）.append（正确答案是“+problem.answer（）+”+“+”
NEXT”）；
$（“.result”）.fadeTo（500,1）
}
}
else if（答案===problem.answer（））{
如果（提交时间<2）{
警告（“正确！”）
}
}
}
}
核对答案（）
});

这是表单提交按钮的事件所在位置

$(".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”）。单击（函数（）{
var checkAnswer=函数（）{
var answer=document.forms[“answer”][“answer input”].value；
如果（答案===null | |答案===“”）{
提醒（“您必须键入答案。”）
}
否则{
submitTimes=submitTimes+1；
if（答案！==problem.answer（））{
如果（提交时间<2）{
$（“#content”）.append（正确答案是“+problem.answer（）+”+“+”
NEXT”）；
$（“.result”）.fadeTo（500,1）
}
}
else if（答案===problem.answer（））{
如果（提交时间<2）{
警告（“正确！”）
}
}
}
}
核对答案（）
});

我不知道事件是否是在通过代码附加的选择器上调用的，而不是最初在html文档中调用的

我试着在页面的某些部分调用该事件，结果成功了

---

但是它不适用于这些，如果您知道原因，请说出来。

您可以在表单上添加一个ID，在提交功能中使用：

$(document).on('submit','id_form',function(e) {
e.preventDefault();

}

---

您是否尝试过使用jquery的.on（）函数，该函数实质上是将click事件处理程序附加到DOM最初完成后创建的任何元素

更多信息请点击此处：

---

-1、孤立问题

$(".problem-submit").on('click',function(){ 
    //function here 
});