Ajax滑块不会移至下一张幻灯片

Question

我将动态数据作为幻灯片返回到我的视图中，每次单击下一步按钮时，数据将保存到localStorage，最后一张幻灯片中的所有数据都将发送到后端。

当前代码的问题在于，我只能到达幻灯片1，然后“下一个”按钮仅存储数据，而不会转到下一张幻灯片。

代码

HTML

<div class="answerPanel">
  <h4 class="text-center">In order to complete this Quiz successfully, pay attention to timer.</h4>
</div>

Script

$('#projectTable tbody').on( 'click', 'tr', function (e) {
  e.preventDefault();
  $('.projectName').empty();
  $('.answerPanel').html('');

  table.$('tr.selected').removeClass('selected');
  $(this).addClass('selected');
  $('.answerPanel').append('<h4 class="text-center">In order to complete this Quiz successfully, pay attention to timer.</h4><button id="clicks" class="btn btn-primary">Begin</button>');
  $('.projectName').empty();
  var projectId = $(this).data('id');

 //quizzes
 $.ajax({
   type:'GET',
   url:'{{url('dashboard/getQuizzeswithChoices')}}/'+projectId,
   beforeSend: function(data) {
     console.log("click - ajax before send", data);
   },
    success:function(data){
        $('.projectName').append('of ', data.project.name);
        //return existed data to quizzes
        var index = 0;
        var countdownTimer = null;
        var count = 0;
        $("#clicks").click(function(e){
            e.preventDefault();

            // timer function
            function timer(seconds, countdownTimer, callback) {
                var days = Math.floor(seconds / 24 / 60 / 60);
                var hoursLeft = Math.floor((seconds) - (days * 86400));
                var hours = Math.floor(hoursLeft / 3600);
                var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
                var minutes = Math.floor(minutesLeft / 60);
                var remainingSeconds = seconds % 60;
                if (remainingSeconds < 10) {
                    remainingSeconds = "0" + remainingSeconds;
                }
                document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
                if (seconds == 0) {
                    clearInterval(countdownTimer);
                    document.getElementById('countdown').innerHTML = "Times Up!";
                    $("#clicks").attr("disabled", true);
                    $('.answerPanel').html('<div class="text-center text-danger">OH NO! <br> Times Up!</div>');
                } else {
                    seconds--;
                }
                //Pass seconds param back to the caller.
                callback(seconds);
            }
            //We pass the countdownTimer param into the timer function as well.
            if (countdownTimer != null) {
                clearInterval(countdownTimer);
            }
            if(typeof data.quizzes[index] !== 'undefined'){
                seconds = data.quizzes[index].quiz_time;
            }
            countdownTimer = setInterval(function() {
                timer(seconds, countdownTimer, function(_seconds){
                    seconds = _seconds;
                })
            }, 1000);
            // printing function
            if(typeof data.quizzes[index] !== 'undefined'){
                var html = '<form id="sendAnswers"> @csrf @method('POST') <div class="row"><div class="col-md-12"><div class="pull-left questionTitle">'+data.quizzes[index].question+'</div><div class="pull-right" id="countdown"></div></div></div>';
                if(data.quizzes[index].choices.length > 0){
                    html+='<div class="col-md-12">';
                    if(data.quizzes[index].question_type == 'multiple'){
                        data.quizzes[index].choices.forEach((element, index, array) => {
                            html+='<div class="checkbox checkbox-primary">';
                            html+='<input class="checkboxes form-check-input" id="choice" name="checkbox" type="checkbox" value="'+element.choice+'">';
                            html+='<label class="control-label">'+element.choice+'</label>';
                            html+='</div>';  
                        });
                    } else if (data.quizzes[index].question_type == 'single') {
                        data.quizzes[index].choices.forEach((element, index, array) => {
                            html+='<div class="radio radio-primary">';
                            html+='<input class="form-check-input" id="radio" name="radio" type="radio" value="'+element.choice+'">';
                            html+='<label class="control-label">'+element.choice+'</label>';
                            html+='</div>';
                        });
                    } else {
                        alert('hi');
                        data.quizzes[index].choices.forEach((element, index, array) => {
                            html+='<div class="row">hi';
                            html+='<input id="input" name="input" type="text">';
                            html+='<label>'+element.choice+'</label>';
                            html+='</div>';
                        });
                    }
                    html+='<button id="clicks" type="submit" class="saveSteps btn btn-primary">Next</button></div></form>';
                }
                $(".answerPanel").html(html);
                index++;
            }

            // if(data.quizzes.length > index) {
            //     $("#clicks").html("Next");
            // }
            if(data.quizzes.length === index) {
                $("#clicks").html("Send");
                $('#clicks').removeClass('btn-primary').addClass('btn-success saveAnswers');
            }
            //end of printing function

            //send form data
            $('.saveSteps').unbind().bind('click', function(e){
                e.preventDefault();
                console.log('saved');

                var checkboxes = [];
                $("input.checkboxes:checkbox:checked").each(function(){
                    checkboxes.push($(this).val());
                });
                // next storage

                var radios = [];
                $("input.radio:checkbox:checked").each(function(){
                    radios.push($(this).val());
                });
                // next storage

                var formData = new FormData();
                formData.append('checkbox', checkboxes);
                formData.append('radio', radios);
                $.post({
                    type: 'POST',
                    url: '{{route('quizzes.store')}}',
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    data: formData,
                    success:function(data){
                        console.log('data', data);
                        // $('.answerPanel').html('<h1>Your Score: <span class="text-success">200</span></h1><h4>Thank you for taking this quiz</h4>');
                        // $("#clicks").hide();
                    }
                });
            });
            //send form data
        });
        //return existed data to quizzes
    }
 // rest of it...

您可以在此视频中看到，我的数据已成功保存，但不会转到下一张幻灯片（页面）。

知道问题可能在哪里吗？