jQuery第二次无法识别点击功能

Question

我真的需要帮助 这是我要执行的操作：我想创建3个div元素，它们从div的顶部飞到底部（#lang_flying_objects），当我单击“正确的一个”（由ID标识）时，我需要再创建三个。 创建它们时，我将它们分配给所有类“ snowflakes”。 但是我只能单击第一个组，而我的onclick函数可以识别正确的ID，但是在创建其他组时，它不会触发onclick函数。 请帮我。 这是我正在使用的代码：

<script>  
function fallingStuff() {
    var $snowflakes = $(),               
        createFallingStuff = function () {
                var $snowflake = $('<div class="snowflakes" id="first"></div>');

                $snowflake.css({
                   'left': (Math.random() * ($('#lang_flying_objects').width()/3 -    offset))  + 'px',
                    'top': (-(20 + offset)) + 'px'
                });
                // add this snowflake to the set of snowflakes
                $snowflakes = $snowflakes.add($snowflake);
                var $snowflake2 = $('<div class="snowflakes" id="second" ></div>');
                $snowflake2.css({
                    'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + $('#lang_flying_objects').width()/3) + 'px',
                    'top': (-(20 + offset)) + 'px'
                });
                // add this snowflake to the set of snowflakes
                $snowflakes = $snowflakes.add($snowflake2);                   
                var $snowflake3 = $('<div class="snowflakes" id="third"></div>');
                $snowflake3.css({
                    'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + 2*$('#lang_flying_objects').width()/3) + 'px',
                   'top': (-(20 + offset)) + 'px'
                });
                // add this snowflake to the set of snowflakes
                $snowflakes = $snowflakes.add($snowflake3);               
            $('#falling_zone').prepend($snowflakes);
        },

        runFalling = function() {
            $snowflakes.each(function() {

                var singleAnimation = function($flake) {                       
                    $flake.animate({
                        top: "500px", 
                        opacity : "0"
                    }, 10000);
                };
                singleAnimation($(this));
            });
    };       
    createFallingStuff();
    runFalling();

}
fallingStuff();    
</script>

这是我的onclick函数：

<script>
    $('.snowflakes').on('click', function() {   
          var idInputed = $(this).attr('id');    
          if(idInputed == "first") //for example
          {
              fallingStuff();
          }
       });          
</script>

为什么它无法识别第二组已创建的div的onclick函数？

Answer 1

由于元素是动态创建的，因此应该使用事件委托 ：

$(document).on('click', '.snowflakes', function() {   
    var idInputed = $(this).attr('id');    
    if(idInputed == "first") {
        fallingStuff();
    }
});