Question

我真的需要帮助。这就是我要做的事情：我想要创建3个div元素，这些元素从div的顶部到底部（#lang_flying_objects）飞行，当我点击＆＃34;正确的一个＆＃34; （通过Id），我需要再创建三个。当我创建它们时，我将它们分配给所有类＆＃34;雪花＆＃34;。但我只能点击第一组，我的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

由于元素是动态创建的，因此您应该使用event delegation：

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

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

1 个答案: