Script execution problems after second click

Question

I have simple page that has Questions/Answers layout. Basically, when user clicks on his chosen answer current question is hided and next question is taken from hidden questions div and then displayed and so on. There is no Ajax included. Plain HTML and Jquery.

My html:

    <div class="visible_questions">

       <div id="question_block_74">

            <h1> Question is ? </h1>

             <label>
              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                  1st answer
               </div>
             </label>

              <label>
              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                  2nd answer
               </div>
             </label>

       </div>
    </div>



<div class="hiden_questions" style="display:none;">


   <div id="question_block_75" class="blocks_f">
          <div class="question-take element">
             <p> 2nd question </p>
          </div>

            <label>
              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="75" value="207">
                   1st answer for 2nd question 
              </div>
            </label>

           <br>


            <label>

              <div class="question-take">
                  <input type="radio" class="practise_answer_radio_btn" name="75" value="208">
                   2nd answer for 2nd question . 

              </div>

            </label>



     </div>

     <div id="question_block_76" class="blocks_f">
             ==//==
             The same type of structure here
     </div>

</div>

My script:

$(".practise_answer_radio_btn").change(function(){

         console.log("message just for testing");

         var name = $(this).attr('name');

         $("#question_block_" + name).hide();

         var div_elements =  $(".hiden_questions .blocks_f").length;         

         $(".hiden_questions .blocks_f:first-child").appendTo(".visible_questions");

            if (div_elements == 0){

               alert("End of the questions!");
            }

});

Problem description:

1st click : When I click for first time on .practise_answer_radio_btn button above displayed script is executed 100% without any errors. So the first question is hidden and new question is appended in .visible_questions div from .hiden_questions div.

2nd (and n click- 3rd, 4th etc.) click executes above script just partially. There isn't any error displayed in Chrome Debug Console. Here I will breakdown part of scripts that works and those who don't.

Doesn't work:

        console.log("message just for testing");

        if (div_elements == 0){   // when div_elements == 0 then this code doesn't execute

               alert("End of the questions!");
        }

Does work(at least it looks like it works, because next question is displayed as it should):

         var name = $(this).attr('name');

         $("#question_block_" + name).hide();

         var div_elements =  $(".hiden_questions .blocks_f").length;         

         $(".hiden_questions .blocks_f:first-child").appendTo(".visible_questions");

What I have tried:

$(document).on('change','.practise_answer_radio_btn',function(){

$("body").on('change','.practise_answer_radio_btn',function(){

$(".practise_answer_radio_btn").change(function(){

These examples results in the same issue.

Thanks in advance for any help.

Answer 1

Check for

var div_elements =  $(".hiden_questions .blocks_f").length;

after you moved the question from the hidden block to the visible block.

$(".practise_answer_radio_btn").change(function(){

       console.log("message just for testing");

       var name = $(this).attr('name');

       $("#question_block_" + name).hide();

       $(".hiden_questions .blocks_f:first-child").appendTo(".visible_questions");
       
       var div_elements =  $(".hiden_questions .blocks_f").length;
       
console.log('questions left: ', div_elements);

          if (div_elements == 0){

             alert("End of the questions!");
          }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visible_questions">

     <div id="question_block_74">

          <h1> Question is ? </h1>

           <label>
            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                1st answer
             </div>
           </label>

            <label>
            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="74" value="205">
                2nd answer
             </div>
           </label>

     </div>
  </div>



<div class="hiden_questions" style="display:none;">


 <div id="question_block_75" class="blocks_f">
        <div class="question-take element">
           <p> 2nd question </p>
        </div>

          <label>
            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="75" value="207">
                 1st answer for 2nd question 
            </div>
          </label>

         <br>


          <label>

            <div class="question-take">
                <input type="radio" class="practise_answer_radio_btn" name="75" value="208">
                 2nd answer for 2nd question . 

            </div>

          </label>



   </div>

   <div id="question_block_76" class="blocks_f">
           ==//==
           The same type of structure here
   </div>

</div>