如何隱藏我動態創建的div？

Question

我創建了一個基於li元素數量創建div的腳本，該部分工作正常。現在我想要做的是隱藏這些div的（動態創建），但它不起作用。有人能告訴我我在這裏做錯了嗎？謝謝！！
Fiddle here

我的代碼：

$(document).ready(function(){ 
$(".create").click(function(){ 
i=''; 
var count = $("li").length; 
for(var i=0;i<count;i++){ 
$('<div class="mydiv" style="width:100px;height:100px;background-color:red;border:1px solid #000000;"></div>').appendTo('body'); 
} 
}); 

$('.check').click(function(){ 
var getDivs= $('div').length; 
alert(getDivs); 
}); 
//Why is this not working? 
$('div').click(function(){ 
$(this).hide(); 
}); 
}); 

Answer 1

嘗試這樣做，而不是（當你創建DIV附加的單擊事件）：

$('<div class="mydiv" style="width:100px;height:100px;background-color:red;border:1px solid #000000;"></div>') 
.click(function(){ 
$(this).hide(); 
}) 
.appendTo('body'); 

Answer 2

所有這些代碼應該是jQuery的準備。問題是你的事件在元素被創建之前被綁定。

$(document).ready(function(){ 
    $(".create").click(function(){ 
     i=''; 
     var count = $("li").length; 

     for(var i=0;i<count;i++){ 
      $('<div class="mydiv" style="width:100px;height:100px;background-color:red;border:1px solid #000000;"></div>').appendTo('body'); 
     } 
     $('.check').click(function(){ 
      var getDivs= $('div').length; 
      alert(getDivs); 
     }); 
     //Now working 
     $('div').click(function(){ 
      $(this).hide(); 
     }); 
    }); 
}); 

Answer 3

嘗試

$(document).on('click', 'div', function() { 
$(this).hide(); 
)};