Javascript jquery按钮不'；在清空并重新填充其包含的div后，t工作

我正在制作一个游戏，生成四个不同隐藏值的按钮。当我的代码第一次运行时，它会正常工作，直到我尝试为新游戏重置。清空包含四个按钮的“crystals”div后，我生成了四个新按钮，但现在它们不再工作了！我如何用按钮清空并重新填充一个div，这些按钮具有可以继续工作的点击处理程序？我对编码还不熟悉，所以这可能是一件愚蠢而简单的事情

我试着用

$（'#crystals'）.html（“”

）替换

$（'#crystals'）.empty

，根据其他有关堆栈溢出的文章，但我没有找到任何专门处理单击处理程序和

empty（）

函数的资源。我还移动了我的函数，以便它们位于document.ready函数中，正如一位同学所建议的那样。我有一个明显的印象，就是我问错了问题

    var growCrystals = function() {
      for (i = 0; i < 4; i++) {
        var crystalButton = $("<button>");
        scoreValue = Math.floor(Math.random() * 12) + 1;
        console.log(scoreValue);
        crystalButton.attr('class' , 'crystal-button');
        crystalButton.attr('score-value' , scoreValue);
        crystalButton.text('button');
        console.log(crystalButton);
        $('#crystals').append(crystalButton);
      }
    }

    var newGame = function() {
      targetNumber = pickTargetNumber();
      totalScore = 0;
      gameOver = false;
      console.log($('#crystals'))
      $('#results').empty();
      $('#crystals').empty();
      console.log($('#crystals'))
      growCrystals();
      console.log($('#crystals'))
      updateGameboard();
      console.log(gameOver);
    }

    // Game
    $('document').ready(function() {
    newGame();

    $('.crystal-button').click(function() {
        totalScore += parseInt($(this).attr('score-value'));
        console.log("pushed ", $(this).attr('score-value'));
        if (gameOver) {
          newGame();
        } else if (totalScore === targetNumber) {
          // You win
          wins++;
          console.log("win ", wins);
          updateGameboard();
          $('#results').text('Player wins! Click any crystal to start a new game!')
          gameOver = true;
        } else if (totalScore > targetNumber) {
          // You lose
          losses++;
          console.log("loss ", losses);
          updateGameboard();
          $('#results').text('Player loses! Click any crystal to start a new game!')
          gameOver = true;
        } else {
          console.log("test loop occured")
          updateGameboard();
        }
      })

    });

var=function（）{
对于（i=0；i<4；i++）{
变量crystalButton=$（“”）；
scoreValue=Math.floor（Math.random（）*12）+1；
console.log（scoreValue）；
attr（'class'，'crystalButton'）；
crystalButton.attr（'score-value'，scoreValue）；
文本（“按钮”）；
控制台日志（crystalButton）；
$（“#crystals”）.append（crystalButton）；
}
}
var newGame=函数（）{
targetNumber=pickTargetNumber（）；
总分=0；
gameOver=false；
console.log（$（'#crystals'））
$（“#结果”）.empty（）；
$（“#晶体”）.empty（）；
console.log（$（'#crystals'））
生长晶体（）；
console.log（$（'#crystals'））
updateGameboard（）；
控制台日志（gameOver）；
}
//游戏
$（'document'）.ready（函数（）{
新游戏（）；
$（'.crystal button'）。单击（函数（）{
totalScore+=parseInt（$（this.attr（'score-value'））；
log（“pushed”和$（this.attr（“score-value”）；
如果（游戏结束）{
新游戏（）；
}否则如果（totalScore==targetNumber）{
//你赢了
wins++；
console.log（“win”，wins）；
updateGameboard（）；
$（“#结果”）.text（'玩家获胜！单击任意水晶开始新游戏！'）
gameOver=true；
}否则如果（totalScore>targetNumber）{
//你输了
损失++；
控制台日志（“损失”，损失）；
updateGameboard（）；
$（“#结果”）.text（'玩家输了！点击任意水晶开始新游戏！'）
gameOver=true；
}否则{
console.log（“发生了测试循环”）
updateGameboard（）；
}
})
});

...
...
...
...
...

使用

而不是

$（'.crystal button'）。单击（function（）{

使用

---

当将子元素动态添加时，将将事件处理程序分配给具有类<代码> >水晶按钮< /代码>的项目。当通过删除按钮时，它通过

工作，删除所有附着在其上的事件。考虑使用。是的，确实如此。我不知道你能做到这一点。非常感谢。是的，这就是解决方案。这是一个非常好的解决方案！我不知道你能做到这一点！非常感谢！

$('#crystals').on('click',  '.crystal-button' ,  function() {