jQuery點擊功能不會在我的div上工作

Question

我有雪效果的JavaScript。想讓每個鱗片點擊，但我不知道我在做什麼錯在這裏...

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

下面是代碼http://codepen.io/anon/pen/eBVJjB 謝謝！

Answer 1

有幾個問題。

• 唯一ID
• 事件代表團

的片應該有他們自己獨特選擇，在這種情況下可能會是一個類。 <div class="flake">。 ID應該是唯一的，而在你的代碼中它們不是。

您所擁有的點擊事件僅與一個帶分配ID的div在分配時出現在DOM中，由於延遲原因可能無法分配。取而代之的是事件應該被委派給所有薄片，優選地與類選擇上述

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

Answer 2

1. id屬性描述應跨越文檔中的元素是唯一的。
2. $('#flake').click(...代碼在將<div id="flake">元素添加到頁面之前運行，因此click事件未附加到它們。您可以通過使用$(document).on('click', '#flake', function() {... });

解決這個問題下面是修復你的代碼：

/** 
 
* 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 \t \t \t = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'), 
 
     documentHeight \t = $(document).height(), 
 
     documentWidth \t = $(document).width(), 
 
     defaults \t \t = { 
 
      minSize \t \t : 10, 
 
      maxSize \t \t : 20, 
 
      newOn \t \t : 500, 
 
      flakeColor \t : "#FFFFFF" 
 
     }, 
 
     options \t \t \t = $.extend({}, defaults, options); 
 

 

 
    var interval \t \t = setInterval(function(){ 
 
     var startPositionLeft \t = Math.random() * documentWidth - 100, 
 
      startOpacity \t \t = 0.5 + Math.random(), 
 
      sizeFlake \t \t \t = options.minSize + Math.random() * options.maxSize, 
 
      endPositionTop \t \t = documentHeight - 40, 
 
      endPositionLeft \t \t = startPositionLeft - 100 + Math.random() * 200, 
 
      durationFall \t \t = 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"); 
 
    }); 
 
});

body { 
 
    background: black; 
 
}

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

Answer 3

有幾個問題你的方法/代碼。

1. HTML文檔應該有唯一的ID，因此用class替換你的id。

2. 這些元素被動態地添加到DOM，並且在執行腳本時它們不存在，因此將該事件附加到文檔並將它們委託給您的flake類。

工作段：

/** 
 
* 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);

body { 
 
    background: black; 
 
}

<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>