javascript - 表单输入上的 Jquery Click 事件未运行

Question

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

这是我遇到问题的代码的主要部分：

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 文档中附加的选择器上调用事件。

我尝试在最初存在的页面部分上调用该事件，它起作用了。

但它不适用于这些，如果你知道为什么，请说出来。

Answer 1

您是否尝试过使用 jquery 的 .on() 函数，该函数本质上将单击事件处理程序附加到 DOM 最初完成后可能已创建的任何元素。

更多信息在这里：http ://api.jquery.com/on/

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

Answer 2

您可以为您的表单分配一个 ID，在提交功能中使用：

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

}