在多步表单的最后一步丢失后退按钮

Question

我有一个后退按钮，放在多步骤表单的最后一步，现在已经消失了，我无法解决原因，有谁能帮忙吗？

第一个form-row是多步骤的地方，所以可以有1步或20步等等。

第二个form-row作为输入到多个步骤的摘要。这也应该有一个后退按钮，但我不能解决它为什么不出现。

  <div class="form-row"> 
       <h2 style="float:left;margin-left:7px;"><?php the_title(); ?></h2> 
       <h2 style="float:right;"><?php echo $counter; ?> of <?php echo the_field('select_number_of_questions'); ?></h2> 
       <div class="clear"></div> 
       <div id="module-area" style="margin-top:0px!IMPORTANT;"> 
        <div id="modules-top"></div> 
        <div id="modules-repeat">       
         <?php if(get_sub_field('test_image')): ?> 
         <?php while(has_sub_field('test_image')): ?> 
          <img class="training" src="<?php echo the_sub_field('image'); ?>" /> 
          <br /><br /> 
         <?php endwhile; ?> 
         <?php endif; ?>   
          <p class="training"><?php echo $repeater_row['question']; ?></p><br /> 
          <p class="training-highlight">Please choose <span class="bold"><?php echo $repeater_row['required_answers']; ?></span> of the following answers:</p><br /> 

          <div class="question" data-max-answers="<?php echo $repeater_row['required_answers']; ?>"> 
          <?php $rows = $repeater_row['answer_options']; 
           foreach ($rows as $row){ ?> 
           <?php $Question[$counter] = $_POST['answer'.$counter]; ?> 
            <div style="display:table-row;"> 
             <div style="display:table-cell;"> 
              <input style="width: 20px;" type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" /> 
             </div> 
             <div style="display:table-cell;"> 
              <p> 
               <?php echo $row['answer']; ?> 
              </p> 
             </div>    
            </div> 
           <?php } ?> 
          </div> 
          <div class="inner"></div> 
          <button class="next"></button> 
         <div class="clear"></div> 
        </div> 
        <div style="margin-bottom:5px;" id="modules-bottom"></div> 
       </div> 
      </div> 
      <?php $counter++; } ?> 

      <div class="form-row" id="form-row-last" style="display:none;"> 
       <h2 style="float:left;margin-left:7px;"><?php the_title(); ?></h2> 
       <div class="clear"></div> 
       <div id="module-area" style="margin-top:0px!IMPORTANT;"> 
        <div id="modules-top"></div> 
        <div id="modules-repeat">       

         <div class="inner" id="inner-summary"></div> 
         <button class="next"></button> 

         <div class="clear"></div> 
        </div> 
        <div style="margin-bottom:5px;" id="modules-bottom"></div> 
       </div> 
      </div> 

这是我的jquery：

<script type="text/javascript"> 
jQuery(function($) { 
$("input[type=checkbox]").on("change", function(){ 
    var html = ""; 
    // Get checked checkboxes 
    $(".form-row").each(function(){ 
     var question = $(this).find(".training").text(), 
      checkedlist = []; 
     $(this).find("input:checked").each(function(){ 
      checkedlist.push($(this).val()); 
     }); 
     // Add question and answers to the summary, only if minimum of 1 checkbox checked 
     if(checkedlist.length) 
     { 
      html += "<p class='training'>" + question + "</p>" + checkedlist.join(", ") + "<br />"; 
     } 
    }); 

    $("#inner-summary").html(html); 
}); 
}); 

jQuery(function($) { 
$(document).ready(function() {  

    // prepend a 'previous' button to all form-rows except the first 
    $('<button>').addClass('previous').appendTo($('.inner').not(':first')); 

    // hide all form-rows, but not the first one 
    $('.form-row').not(':first').hide(); 

    // hide on last step 
    $('button.next').last().hide(); 

    // add the submit button to the last form-row 
    $('<input>').addClass('check').prop('type', 'submit').appendTo($('.form-row:last')); 


    // handle the previous button, we need to use 'on' here as the 
    // previous buttons don't exist in the dom at page load 
    $('.form-row').on('click', 'button.previous', function(e) { 
     e.preventDefault(); 
     $(this).parents('div.form-row').hide().prev('div.form-row').show(); 
    }); 

    $('button.next').click(function(e) { 
     // prevent the next buttons from submitting the form 
     e.preventDefault(); 
     // hide this form-row, and show the next one 
     $(this).parents('div.form-row').hide().next('div.form-row').show(); 
    });  

}); 
}); 

jQuery(function($) { 
$(document).ready(function() { 
    $("input[type=checkbox]").click(function (e) { 
     if ($(e.currentTarget).closest("div.question").length > 0) { 
      toggleInputs($(e.currentTarget).closest("div.question")[0]);   
     } 
    }); 
}); 

function toggleInputs(questionElement) { 
    if ($(questionElement).data('max-answers') == undefined) { 
     return true; 
    } else { 
     maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
     if ($(questionElement).find(":checked").length >= maxAnswers) { 
      $(questionElement).find(":not(:checked)").attr("disabled", true); 
     } else { 
      $(questionElement).find("input[type=checkbox]").attr("disabled", false); 
     } 
    } 
} 
}); 
</script> 

Answer 1

加入解决：

$('<button>').addClass('previous').appendTo($('#inner-summary')); 

对此块：

jQuery(function($) { 
$("input[type=checkbox]").on("change", function(){ 
    var html = ""; 
    // Get checked checkboxes 
    $(".form-row").each(function(){ 
     var question = $(this).find(".training").text(), 
      checkedlist = []; 
     $(this).find("input.correct:checked").each(function(){ 
      checkedlist.push($(this).val()); 
     }); 
     // Add question and answers to the summary, only if minimum of 1 checkbox checked 
     if(checkedlist.length) 
     { 
      html += "<p class='training'>" + question + "</p><p>" + checkedlist.join(", ") + "</p><br />"; 
     } 
    }); 

    $("#inner-summary").html(html); 
    $('<button>').addClass('previous').appendTo($('#inner-summary')); 
}); 
}); 

Answer 2

变化：$('<button>').addClass('previous').appendTo($('.inner').not(':first'));

要：

$('button').addClass('previous').appendTo($('.inner').not(':first'));