jquery无法在测试结束时触发Ajax调用

var answers = [];

function nextQuestion() {
  var cq = $('.current.question');
  cq.removeClass('current');
  var hasNext = cq.next().length > 0;
  if (hasNext) {
    cq.next().addClass('current');
  } else {
    alert('you\'ve done!');
    $('body').append('<h2>Quiz completed</h2>');
  }
  return hasNext;
}

$('.question a').on('click', function(e) {
  e.preventDefault();
  var self = $(this);
  var ans = self.parent().index() + 1;
  answers.push(ans);
  var hasNext = nextQuestion();
  if (!hasNext) {
    alert('ajax send data to php');
    //will do ajax call here
  }
});

.question {
  display: none;
}

.question.current {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="question current">First question ?
  <ul>
    <li><a href="#">Answer A</a></li>
    <li><a href="#">Answer B</a></li>
    <li><a href="#">Answer C</a></li>
    <li><a href="#">Answer D</a></li>
  </ul>
</div>
<div class="question">Second Question ?
  <ul>
    <li><a href="#">Answer A</a></li>
    <li><a href="#">Answer B</a></li>
    <li><a href="#">Answer C</a></li>
    <li><a href="#">Answer D</a></li>
  </ul>
</div>
<div class="question">Third question ?
  <ul>
    <li><a href="#">Answer A</a></li>
    <li><a href="#">Answer B</a></li>
    <li><a href="#">Answer C</a></li>
    <li><a href="#">Answer D</a></li>
  </ul>
</div>
<div class="question">Last question ?
  <ul>
    <li><a href="#">Answer A</a></li>
    <li><a href="#">Answer B</a></li>
    <li><a href="#">Answer C</a></li>
    <li><a href="#">Answer D</a></li>
  </ul>
</div>

<!-- <script>/* here is where the script tag would be */</script> -->