jQuery为何无法操作弹出层元素？

问题很简单，点击图片，弹出层出现，点击弹出层上的Close按钮，关闭弹出层。
弹出可以正常运行，但是close一直失败，点击没有反应，求大神指点！
但是我把

   $("#btn_img_close").click(function(){
       $("#picwrapper").fadeOut(300);
   });

更换为

   $("#picwrapper").click(function(){
       $("#picwrapper").fadeOut(300);
   });

就可以点击picwrapper区域关闭弹出层。

我的代码如下（关键代码）

html
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Property ID 1</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/property_view_style.css" type="text/css" />
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
   <p id="container" class="hidden">
     <img id="enlarged" src="" alt="large view of property picture" />
       <span>
       <input id="close_btn" type="button" value="close" />
       </span>
   </p>
   <aside>
       <h1>Property Images</h1>
       <p>Click on an image to enlarge it</p>
       <p><img id="pic_1" src="images/pic-01.jpg" alt="" /></p>
       <p><img id="pic_2" src="images/pic-02.jpg" alt="" /></p>
       <p><img id="pic_3" src="images/pic-03.jpg" alt="" /></p>
       <p><img id="pic_4" src="images/pic-04.jpg" alt="" /></p>
   </aside>
   </div>
   <script type="text/javascript" src="js/property_view.js"></script>
</body>

</html>

js
$(document).ready(function(){
   //html for pics wrapper
   var Pic_Wrapper = $("<div id='picwrapper'></div>");
   $("body").append(Pic_Wrapper);
   $("#picwrapper").css({'display':'none','width':'500px','height':'300px','position':'fixed','top':'50%','margin-top':'-150px','background':'#fff','z-index':3,left:'50%','margin-left':'-250px'});
   $("#picwrapper").hide();

   var div_img = $("<img id='img_carousel' width = '100%' src="+ pic_1_url +" />");
   var btn_img_close = $("<button id='btn_img_close' align='center'>Close</button>")
   var btn_img_next = $("<button id='btn_img_next'> &gt; </button>")
   $("#pic_1").click(function(){
       $("#picwrapper").empty();
       $("#picwrapper").fadeIn(300);
       $("#picwrapper").append(div_img);
       $("#picwrapper").append(btn_img_close);
       $("#picwrapper").append(btn_img_next);
   });

   $("#btn_img_next").click(function(){
       $("#img_carousel").attr("src",pic_2_url);
   });

   $("#btn_img_close").click(function(){
       $("#picwrapper").fadeOut(300);
   });
});

如下图。

又是一个事件委托的问题,好好看看js的事件委托吧http://www.tuicool.com/articles/jQZj6zB

jquery绑定btn_img_close的onclick事件时，button还没有append到picwrapper元素里，可以这样试一下。

var btn_img_close = $("<button id='btn_img_close' align='center'>Close</button>")

$("#pic_1").click(function(){
       $("#picwrapper").empty();
       $("#picwrapper").fadeIn(300);
       $("#picwrapper").append(div_img);
       $("#picwrapper").append(btn_img_close);
       $("#picwrapper").append(btn_img_next);
       $("#btn_img_close").click(function(){
           $("#picwrapper").fadeOut(300);
       });
   });

因为那几个 btn_img_next btn_img_close 是动态生成，append到页面中的， click 是 bind 方法，只能绑定一开始就在页面上的DOM，你需要委托。。。

不知道你的版本，可以用 .live() .delegate() .on()
看看你的版本，百度下这三个 api，你自己用

$("#btn_img_close").click()对未来元素是不生效的，试一下

$("body").on("click", "#btn_img_close", function(){
...
});

【热门文章】