javascript - 在 jquery 中创建雪花

Question

我使用 jquery 创建雪花。一切似乎都很好，但我想在您单击特定薄片时执行警报选项，然后它应该会提醒消息。但是我实现了警报选项不断触发的点击功能。我不确定我在哪里做错了。我尝试了 preventDefault 仍然没有任何反应。 http://jsfiddle.net/vicky081/4cZdu/12/

 function snowFalling(){

        // move the snow
        $('.snow').each(function(key, value){

            // check if the snow has reached the bottom of the screen
            if( parseInt($(this).css('top')) > windowHeight - 80 ) {

                // remove the snow from the HTML DOM structure
                $(this).remove();
            }       

            // set up a random speed
            var fallingSpeed = Math.floor(Math.random() * 5 + 1);

            // set up a random direction for the snow to move
            var movingDirection = Math.floor(Math.random()*2);

            // get the snow's current top
            var currentTop = parseInt($(this).css('top'));      

            // get the snow's current top
            var currentLeft = parseInt($(this).css('left'));                

            // set the snow's new top
            $(this).css('top', currentTop + fallingSpeed ); 

            // check if the snow should move to left or move to right
            if( movingDirection === 0){

                // set the snow move to right
                $(this).css('left', currentLeft + fallingSpeed );   

            }else {

                // set the snow move to left
                $(this).css('left', currentLeft + -(fallingSpeed) );                

            }                   

        }); 
        jQuery(this).click(function() {
            alert('You Clicked');
        });

        // repeat the rollIt() function for each 200 microseconds
        window.setTimeout(snowFalling, 200);            

    }        

    // call the function when the document is loaded completely
    generateSnow();   
    snowFalling();

});

现在我想提醒特定的点击。如何防止点击雪花时出现多重警报。谢谢。

Answer 1

如果您只希望在单击雪花时出现警报，请将处理程序移动到创建雪花的位置，而不是像您当前那样在我们更新时移动处理程序。

$('<div />')
    .addClass('snow')
    .css('top', snowTop)
    .css('left', snowLeft)
    .css('position','absolute')
    .html('*')
    .click(function() {
        alert('You Clicked');
    })
);

jsFiddle