Javascript 递归函数会多次触发其他调用

我正在制作一个问答游戏，其中用户会看到一段引语，并猜测作者：

  function startGame(quotes) {
    askQuestion(quotes[0], 0, 0);

    function askQuestion(quote, question, score) {
      var q = "<span class='quo'>&ldquo;</span><em>" + quote.quote + "</em><span class='quo'>&rdquo;</span>";
      $('.choice').css('visibility', 'visible');
      $('#questions').html(q);
      $('.choice').click(function(e){
        $('.choice').css('visibility', 'hidden');
        e.preventDefault();
        var nextq = (question + 1);
        var btntxt = (nextq < number_of_questions ? 'Next...' : 'Final results');
        if ($(this).attr('data-author') === quote.author) {
          score++;
          $('#questions').html('<h1>Correct.</h1><a class="btn next">' + btntxt + '</a>');
          document.getElementById('win').play();
        } else {
          $('#questions').html('<h1>Wrong.</h1><a class="btn next">' + btntxt + '</a>');
          document.getElementById('lose').play();
        }
        $('#questions').append('<h4>Score: ' + score + '/' + nextq + '</h4>');
        $('.next').on("click", function(){
          question += 1;
          if (question < number_of_questions) {
            askQuestion(quotes[question], question, score);
          } else {
            tallyScore(score);
          }
        });
      });
    }
  }

函数开始名（引号）{
提问（引用[0]，0，0）；
函数askQuestion（引用、问题、分数）{
var q=“&ldquo；”+quote.quote+”&rdquo；
$（'.choice'）.css（'visibility'，'visible'）；
$（'问题'）.html（q）；
$（'.choice'）。单击（函数（e）{
$（'.choice'）.css（'visibility'，'hidden'）；
e、 预防默认值（）；
var nextq=（问题+1）；
var btntxt=（nextq<问题的数量？“下一步…”：“最终结果”）；
if（$（this.attr（'data-author'）==quote.author）{
分数++；
$（“#questions”）.html（'正确..
实际上很容易修复。您正在反复附加click listener，因此每次设置它时都将其删除

改变

  $('.choice').click(function (e) {

到

每次调用askQuestion时，您都会向html元素添加一个事件处理程序。因此，当您单击
.choice
元素时，会运行多个事件

尝试为所有生成的元素提供一个唯一的id，并使用该id附加事件处理程序。
提供一个JSFIDLE并不是一个坏主意idea@roasted--我添加了一个指向JSFIDLE的链接。
  $('.choice').off().click(function (e) {