Question

我正在尝试使鼹鼠的图像可点击，一旦点击将增加分数，但.on（）将无法使用图像的类名。但是，如果我使用选择器＆＃34; #gamespace＆＃34;，它会起作用，但是然后点击游戏空间中的任何地方都会获得玩家点数，而不仅仅是点击鼹鼠。

<!DOCTYPE html>
<html>
  <head>

    <title>Whack-A-Mole (CSCI2447)</title>

    <!-- CSS styles: This is for me to worry about; not you. -->
    <link href="css/game.css" rel="stylesheet" />
    <script src="js/jquery-2.2.1.min.js"></script>
    <script type="text/javascript">
    var score = 0
    var time = 30
    var t;
    var moleRepeat;
    $(document).ready(function(){
    $('#start_button').click(function (){
    start();
    });
    $('.mole').on('click' , function () {
    counter();
    });
    });

    function getYRandomNumber(){
        return Math.floor((Math.random()*300)+0);
      };

    function getXRandomNumber(){
        return Math.floor((Math.random()*600)+0);
      };

     function counter() {
     score++;
     $("#score").html(score + ' pts');
     };

     function start() {
     $('#timer').show();
     addMole();
     decrement();
     $('h1').css("color","purple");
     $('#gamespace').css("background-color", "green");
     };

     function decrement() {
     time--;
     $('#timer').html(time + ' seconds left');
     t = setTimeout('decrement()', 1000);
     };

     function addMole() {
     $('#gamespace').append('<img class="mole" src="img/mole.png" onClick="counter()"/>');
     moleRepeat = setTimeout('addMole()', 2000);
     };
    </script>
  </head>
  <body>

    <div id="content">

        <h1>Whack-A-Mole</h1>

        <p>After clicking "start", you will have 30 seconds to click
        as many moles as you can. The moles appear randomly so be ready! </p>

        <div id="controls">
            <span id="score">0 pts</span>
            <button type="button" id="start_button">Start!</button>
        </div>

        <div id="timer">30 seconds left</div>

        <div id="gamespace">



        </div>

    </div>
  </body>
</html>

Answer 1

您要在click event handler上添加.mole，然后将其附加到#gamespace并存在于页面上，而是使用事件委派

$('#gamespace').on('click','.mole' ,function () {
    counter();
 });

Answer 2

看起来你试图绑定到＆＃39; .mole＆＃39;的点击事件。在任何存在之前。直接绑定仅适用于DOM中已存在的元素。您可以通过执行委托绑定来解决此问题。

$('#content').on('click', '.mole', function(){ ... });

这将使它听取来自鼹鼠元素的冒泡事件。由于它适用于冒泡事件，因此创建它们无关紧要。

Jquery .on（）没有调用选择器

2 个答案: