在跨度上动态创建的圆，我需要在单击事件中使用动画隐藏

Question

当我

单击该圆圈时动态创建的圆圈，该圆圈向下动画执行并隐藏该圆圈。它在键下工作，但我不知道为什么它不适用于 onClick 事件。

可能是它与 live（） 和委托 （） 一起工作，但我不知道如何...

这是我的代码 http://codepen.io/anon/pen/mRJpEx 的链接

function CircleDown(ch) {
  var keycode = ch.id;
  alert(keycode);
  var width = screen.width - 100;
  var height = screen.height - 200;
  $('.bubb' + keycode).animate({
    "top": height + "px",
    "opacity": 0
  }, 'slow');
  $('.bubb' + keycode).fadeOut('slow').hide('slow', function() {
    code += 20;
    $('#score').html(code);
    $(this).remove();
  });
};
$(document).ready(function() {
  // Getting screen resolutions and positioning the start button
  var width = screen.width - 100;
  var height = screen.height - 200;
  var code = 0;
  $('#start').css({
    "top": (height / 2) + 'px',
    "left": (width / 2) + 'px'
  });
  $('#start').click(function() {
    $(this).fadeOut('slow');
    $('#score').show();
    genLetter();
  });
  // Dealing KeyEvents and fading out matched bubble
  $(document).keydown(function(event) {
    var keycode = event.keyCode;
    $('.bubb' + keycode).animate({
      "top": height + "px",
      "opacity": 0
    }, 'slow');
    $('.bubb' + keycode).fadeOut('slow').hide('slow', function() {
      code += 20;
      $('#score').html(code);
      $(this).remove();
    });
  });
  // Generating a random alphabet between A-Z
  function genLetter() {
      var color = randomColor();
      var k = Math.floor(Math.random() * (90 - 65 + 1)) + 65;
      var ch = String.fromCharCode(k);
      var top = Math.floor(Math.random() * height);
      var left = Math.floor(Math.random() * width);
      $('body').append('<span id=' + ch + ' attrChar=' + ch + ' class="bubb bubb' + k + '" style="left: ' + left + '; top: ' + top + '; background-color:' + color + '" onclick=CircleDown(' + ch + ')>' + ch + '</span>');
      setTimeout(genLetter, 1000);
    }
    //$( "#dataTable tbody tr" ).on( "click", function() {
    //console.log( $( this ).text() );
    //});
  $('#Round').click(function() {
    $(this).fadeOut('slow');
    $('#score').show();
  });
  // Generating a random color
  function randomColor() {
    var color = '';
    var values = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
    for (c = 0; c < 6; c++) {
      no = Math.floor(Math.random() * 15);
      color += values[no];
    }
    return color;
  }
});

body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.bubb {
  position: absolute;
  width: 30px;
  height: 30px;
  font: bold 14px verdana;
  background-color: yellow;
  text-align: center;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  vertical-align: middle;
  padding: 5px;
}
#score {
  font-size: 46px;
  top: 25px;
  right: 50px;
  display: none;
  text-align: right;
}
#start {
  width: 50px;
  padding: 10px 15px;
  text-align: center;
  font: bold 15px arial;
  background-color: #dedede;
  color: #000;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  position: absolute;
}
#start:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">0</div>
<div id="start">Start</div>

Answer 1

试试这个更新的代码。 onclick在这里为Circle工作。

在点击功能中，存在获取密钥代码的问题。所以我使用以下方法更正了它：

var keycode = ch.id;
if(keycode!=undefined){
   keycode = keycode.charCodeAt(0);
}

var code;
function CircleDown(ch) {
  var keycode = ch.id;
  if(keycode!=undefined){
   keycode = keycode.charCodeAt(0);
  }
  alert(keycode);
  var width = screen.width - 100;
  var height = screen.height - 200;
  $('.bubb' + keycode).animate({
    "top": height + "px",
    "opacity": 0
  }, 'slow');
  $('.bubb' + keycode).fadeOut('slow').hide('slow', function() {
    code += 20;
    $('#score').html(code);
    $(this).remove();
  });
};
$(document).ready(function() {
  // Getting screen resolutions and positioning the start button
  var width = screen.width - 100;
  var height = screen.height - 200;
  var code = 0;
  $('#start').css({
    "top": (height / 2) + 'px',
    "left": (width / 2) + 'px'
  });
  $('#start').click(function() {
    $(this).fadeOut('slow');
    $('#score').show();
    genLetter();
  });
  // Dealing KeyEvents and fading out matched bubble
  $(document).keydown(function(event) {
    var keycode = event.keyCode;
    $('.bubb' + keycode).animate({
      "top": height + "px",
      "opacity": 0
    }, 'slow');
    $('.bubb' + keycode).fadeOut('slow').hide('slow', function() {
      code += 20;
      $('#score').html(code);
      $(this).remove();
    });
  });
  // Generating a random alphabet between A-Z
  function genLetter() {
      var color = randomColor();
      var k = Math.floor(Math.random() * (90 - 65 + 1)) + 65;
      var ch = String.fromCharCode(k);
      var top = Math.floor(Math.random() * height);
      var left = Math.floor(Math.random() * width);
      $('body').append('<span id=' + ch + ' attrChar=' + ch + ' class="bubb bubb' + k + '" style="left: ' + left + '; top: ' + top + '; background-color:' + color + '" onclick=CircleDown(' + ch + ')>' + ch + '</span>');
      setTimeout(genLetter, 1000);
    }
    //$( "#dataTable tbody tr" ).on( "click", function() {
    //console.log( $( this ).text() );
    //});
  $('#Round').click(function() {
    $(this).fadeOut('slow');
    $('#score').show();
  });
  // Generating a random color
  function randomColor() {
    var color = '';
    var values = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
    for (c = 0; c < 6; c++) {
      no = Math.floor(Math.random() * 15);
      color += values[no];
    }
    return color;
  }
});

body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.bubb {
  position: absolute;
  width: 30px;
  height: 30px;
  font: bold 14px verdana;
  background-color: yellow;
  text-align: center;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  vertical-align: middle;
  padding: 5px;
}
#score {
  font-size: 46px;
  top: 25px;
  right: 50px;
  display: none;
  text-align: right;
}
#start {
  width: 50px;
  padding: 10px 15px;
  text-align: center;
  font: bold 15px arial;
  background-color: #dedede;
  color: #000;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  position: absolute;
}
#start:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">0</div>
<div id="start">Start</div>