Question

我有雪效果javascript。想要点击每个片状，但我不知道我在这里做错了什么......

$('#flake').click(function(e) {  
  alert("Test");
});

以下是代码http://codepen.io/anon/pen/eBVJjB 谢谢！

Answer 1

有几个问题。

unique ids
事件委托

片应该有他们的自己的唯一选择器，在这种情况下可能是一个类。 <div class="flake">。 ids应该是唯一的，并且在您的代码中它们不是。

您所拥有的click事件仅与 one div绑定，并且在分配时DOM中存在id flake，由于延迟，可能为none。相反，应该将事件委托给所有薄片，最好使用上面描述的类选择器

$("body").on("click",".flake",function(e){
    alert('clicked');
});

Answer 2

您的方法/代码存在几个问题。

HTML文档应具有唯一ID，因此请将您的ID替换为类。
元素被动态添加到DOM中，并且在脚本执行时它们不存在，因此将事件附加到文档并将它们委托给您的片段类。

工作片段：

＆＃13;

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @params flakeColor - color of snowflake, #FFFFFF by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
(function($) {

  $.fn.snow = function(options) {

    var $flake = $('<div class="flake" />').css({
        'position': 'absolute',
        'top': '-50px'
      }).html('&#10052;'),
      documentHeight = $(document).height(),
      documentWidth = $(document).width(),
      defaults = {
        minSize: 10,
        maxSize: 20,
        newOn: 500,
        flakeColor: "#FFFFFF"
      },
      options = $.extend({}, defaults, options);


    var interval = setInterval(function() {
      var startPositionLeft = Math.random() * documentWidth - 100,
        startOpacity = 0.5 + Math.random(),
        sizeFlake = options.minSize + Math.random() * options.maxSize,
        endPositionTop = documentHeight - 40,
        endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
        durationFall = documentHeight * 10 + Math.random() * 5000;
      $flake
        .clone()
        .appendTo('body')
        .css({
          left: startPositionLeft,
          opacity: startOpacity,
          'font-size': sizeFlake,
          color: options.flakeColor
        })
        .animate({
            top: endPositionTop,
            left: endPositionLeft,
            opacity: 0.2
          },
          durationFall,
          'linear',
          function() {
            $(this).remove()
          }
        );
    }, options.newOn);

  };

})(jQuery);

＆＃13;

body {
  background: black;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
  $(document).ready(function() {
    $.fn.snow();
  });
</script>
<script>
  $(document).on("click", '.flake', function(e) {
    alert("Test");
  });
</script>

＆＃13;

Answer 3

id属性在文档中的元素之间应该是唯一的。
$('#flake').click(...代码在<div id="flake">元素添加到页面之前运行，因此click事件未附加到它们。您可以使用$(document).on('click', '#flake', function() {... });

以下是对您的代码的修复：

＆＃13;

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @params flakeColor - color of snowflake, #FFFFFF by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
(function($){
  $.fn.snow = function(options){

    var $flake 			= $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'),
        documentHeight 	= $(document).height(),
        documentWidth	= $(document).width(),
        defaults		= {
          minSize		: 10,
          maxSize		: 20,
          newOn		: 500,
          flakeColor	: "#FFFFFF"
        },
        options			= $.extend({}, defaults, options);


    var interval		= setInterval( function(){
      var startPositionLeft 	= Math.random() * documentWidth - 100,
          startOpacity		= 0.5 + Math.random(),
          sizeFlake			= options.minSize + Math.random() * options.maxSize,
          endPositionTop		= documentHeight - 40,
          endPositionLeft		= startPositionLeft - 100 + Math.random() * 200,
          durationFall		= documentHeight * 10 + Math.random() * 5000;
      $flake
      .clone()
      .appendTo('body')
      .css(
        {
          left: startPositionLeft,
          opacity: startOpacity,
          'font-size': sizeFlake,
          color: options.flakeColor
        }
      )
      .animate(
        {
          top: endPositionTop,
          left: endPositionLeft,
          opacity: 0.2
        },
        durationFall,
        'linear',
        function() {
          $(this).remove()
        }
      );
    }, options.newOn);

  };

})(jQuery);

$(function(){
  $.fn.snow();
  $(document).on("click", '.flake',function() {  
    alert("Test");
  });
});

＆＃13;

body {
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

jQuery点击功能不能在我的div上工作

3 个答案: