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

可以ASIGN一個ID到表單，在提交功能的使用：

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

} 

Answer 2

您是否嘗試過使用jQuery的。對（）函數基本上重視click事件處理程序的任何元素使用可能已在DOM最初完成後創建。

更多的信息在這裏：http://api.jquery.com/on/

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