第二次點擊後的腳本執行問題

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>