I Use .off() Limit One Click . But When Next Page Button Not Work

.off('click') is keypoint,help me limit one chick but have other problem. i hope button recovery click function work.so use .on( ) recovery click but not work . console.log not sh

Solution 1:

See my comments in the code...

$(function() {

  // our test objectlet testMath = {
    1: {
      question: "1 + 2 = ?",
      options: [3, 6],
      answer: 3
    },
    2: {
      question: "2 + 7 = ?",
      options: [9, 13],
      answer: 9
    },
    3: {
      question: "10 + 4 = ?",
      options: [9, 13, 14, 5, 15],
      answer: 13
    }
  };

  // constant question pageconst questionPage = $('#questionPage');

  // render question functionlet renderQuestion = function(question) {

    // if question id exists in testMath objectif (testMath[question]) {

      // render the question
      $('.question', questionPage).html(testMath[question].question);

      // remove old options
      $('.options',questionPage).empty();

      // for each question answer options
      testMath[question].options.forEach(function(answer) {

        // append answer option button to options
        $('.options',questionPage).append('<button data-question="' + question + '" data-answer="' + answer + '">' + answer + '</button>');

      });

    } else {

      // empty question page or what ever
      $(questionPage).empty();
      
      // test complete alertalert('Test Complete!');

    }
  }

  // each options button in question page click event
  $(questionPage).on('click', '.options BUTTON', function() {

    // get this button data valueslet question = $(this).data('question');
    let answer = $(this).data('answer');

    // check answercheckAnswer(this, question, answer);

  });

  // check answer functionlet checkAnswer = function(elem, question, answer) {

    // if answer is correctif (answer === testMath[question].answer) {

      // render this button text correct and switch off event 
      $(elem).text('correct').off('click');

      // 2 sec delaysetTimeout(function() {

        // render next questionnextQuestion(question);

      }, 2000);

    // else answer is wrong
    } else {

      // render this button text wrong
      $(elem).text("wrong");

      // 1 sec delaysetTimeout(function() {

        // render wrong answer value back this button
        $(elem).text(answer);

      }, 1000);

    }

  }

  // next question functionlet nextQuestion = function(question) {

    // render next questionrenderQuestion(question + 1);

  }

  // document on click method to check for all matching targets
  $(document).on('click', '#start', function() {

    // show the question page
    $(questionPage).show();

    // render question id 1renderQuestion(1);

    // remove start button
    $(this).remove();

  });

});

<buttonid="start">start</button><divid="questionPage"style="display: none;"><h1>Question</h1><br><pclass="question"></p><divclass="options"></div></div><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>