第二次点击后的脚本执行问题

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

}); 

问题描述：

第1点击：当我点击了第一次.practise_answer_radio_btn上面显示的脚本按钮执行100％没有任何错误。所以第一个问题是隐藏的，新的问题被附加在.hiden_questions div的.visible_questions div中。

第2（和n点击 - 第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(){ 

这些示例导致相同的问题。

在此先感谢您的帮助。

Answer 1

检查

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

你从隐藏块移动的问题可见块之后。

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