div click事件不起作用

我有这个简单的代码，在身体内附加一个div，

     $(document).ready( function() { $('#show').click( function() { $("
").appendTo('body'); $('#fade').fadeIn('fast'); }); $('#fade').click( function() { $('#fade').remove('fast'); }); });    
  
   

CSS

 #fade { display: none; background: black; opacity:0.4; filter:alpha(opacity=50); z-index: 1; position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #window { width: 440px; height: 356px; background: white; position:fixed; left:50%; top:30%; margin:-70px 0 0 -245px; z-index: 2; } 

附加我的div #fade工作正常，但我在#fade上的click事件无法正常工作。 我看起来很简单，但我不知道为什么不能正常工作。

Answer 1

工作解决方案http://jsfiddle.net/ffK3u/1/

 $(document).ready( function() { $('#show').click( function() { $("
").appendTo('body'); $('#fade').fadeIn('fast'); }); $(document).on("click","#fade", function() { $('#fade').fadeOut("slow",function(){ $('#fade').remove(); }); }); }); 

Answer 2

假设您正在使用jQuery 1.7，您可以使用.on()将点击委托给文档级别。

 $(document).on('click', '#fade', function() { $('#fade').remove('fast'); }); 

基本上，您不能为尚不存在的元素设置单击处理程序，但是您可以在此实例document中将单击委托给父级。 当文档收到点击时，它会检查以确保它来自#fade并做你需要做的任何事情。

此方法是.live()的更新和更好的版本，您可能已经或可能没有看到用于将事件绑定到动态插入DOM的元素。

为了进一步阅读，该技术依赖于事件冒泡和事件委托。

Answer 3

演示。

您不需要每次都创建一个新div ，只需将其缓存在局部变量中即可。

使用.on会起作用，但不是必需的。

 var fade = $("
").click(function () { $(this).fadeOut('fast'); }); $('#show').click(function () { fade.appendTo('body').fadeIn('fast'); }); 

Answer 4

jquery中的.remove()只接受selector作为参数

  $('#show').click( function() { $("
").appendTo('body'); $('#fade').fadeIn('fast'); $('#fade').click( function() { $(this).remove(); }); }); 

DEMO

Answer 5

如果你希望它淡出，请执行以下操作：

 $('#fade').click( function() { $('#fade').fadeOut('fast'); }); 

Answer 6