Jquery Click Event on Form Input Not Running

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 идентификатор в форму, в использовании в функции предоставить:

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

} 

Answer 2

вы пробовали с помощью с помощью функции .На JQuery в(), который по существу крепит обработчик события клика к любому элементу, который может были созданы после того, как DOM был первоначально завершен. более

информация здесь: http://api.jquery.com/on/

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