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

您可以为表单指定一个ID，用于提交功能：

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

}

Answer 2

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

此处有更多信息：http://api.jquery.com/on/

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

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

2 个答案: