Question

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

在堆栈溢出的其他每篇文章中，我都尝试用$('#crystals').empty代替$('#crystals).html("")，但是我没有找到任何专门用于处理单击处理程序和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();
        }
      })

    });


    <body class="d-flex flex-column h-100">
        <div class="container">
            <header>...
            </header>

            <section>
                ...
                <div class="row">
                    <!-- <div class="col-md-2"></div> -->
                    <div class="col-md">
                        <div id="crystals"></div>
                    </div>
                    <!-- <div class="col-md-2"></div> -->
                </div>
                ...
            </section>

            <footer class="footer mt-auto py-3">
                ...
            </footer>
        </div>
    </body>   
    ...
    </html>

Answer 1

使用on

代替$('.crystal-button').click(function() {

使用

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

在动态添加子元素时，这会将事件处理程序分配给.crystal-button元素中类别为#crystals的项目。通过event delegation

jQuery按钮在其包含的div清空并重新填充后不起作用

1 个答案: