2回目のクリック後のスクリプト実行の問題

Question

質問/回答のレイアウトを持つ簡単なページがあります。基本的に、ユーザーが選択した回答をクリックすると、現在の質問は隠され、次の質問は隠された質問divから取得されて表示されます。 Ajaxは含まれていません。プレーンHTMLとJquery。

私の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> 

マイスクリプト：

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

}); 

問題の説明：

第一クリック：私は0で初めてクリック表示されたスクリプトの上にあるボタンはエラーなしで100％実行されます。だから最初の質問は隠されて、 divから.visible_questions divに新しい質問が追加されます。

2回目（クリックして3回目、4回目など）は上記のスクリプトを部分的に実行します。 Chromeデバッグコンソールにエラーは表示されません。ここでは、動作するスクリプトと動作しないスクリプトを分解します。

は動作しません：

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

は、（それが動作するようにそれが必要として、次の質問が表示されるので、少なくともそれは、見えます）の作業を行います。

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

何私は試しました：

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

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

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

これらの例でも同じ問題が発生します。

ご協力いただきありがとうございます。

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

ため

Answer 1

チェックあなたは目に見えるブロックに隠されたブロックから質問を移動した後。

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