Skript Ausführungsprobleme nach dem zweiten Klick

Question

Ich habe eine einfache Seite, die Fragen/Antworten Layout hat. Grundsätzlich, wenn der Benutzer auf seine gewählte Antwort klickt, wird die aktuelle Frage ausgeblendet und die nächste Frage wird aus versteckten Fragen div genommen und dann angezeigt und so weiter. Es ist kein Ajax enthalten. Einfaches HTML und Jquery.

Mein 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> 

Mein Skript:

$(".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!"); 
      } 

}); 

Problembeschreibung:

1. Klick: Wenn ich für das erste Mal klicken auf .practise_answer_radio_btn Schaltfläche über dem angezeigten Skript wird zu 100% ohne Fehler ausgeführt. Also die erste Frage ist versteckt und neue Frage wird in .visible_questions div von .hiden_questions div angehängt.

2. (und n click - 3., 4. usw.) klicken Sie führt oben Skript nur teilweise. In der Chrome Debug Console wird kein Fehler angezeigt. Hier werde ich einen Teil der Skripte aufschlüsseln, die funktionieren und diejenigen, die nicht funktionieren.

funktioniert nicht:

 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!"); 
     } 

funktioniert (zumindest sieht es aus wie es funktioniert, weil die nächste Frage, wie es angezeigt wird, sollten):

  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"); 

Was Ich habe versucht:

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

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

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

Diese Beispiele führen zum gleichen Problem.

Vielen Dank im Voraus für jede Hilfe.

Answer 1

prüfen

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

, nachdem Sie die Frage aus dem verborgenen Block auf den sichtbaren Block bewegt.

$(".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>