开发者社区> 问答> 正文

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);
   });
});

如下图。

展开
收起
小旋风柴进 2016-05-31 10:02:02 2117 0
1 条回答
写回答
取消 提交回答
  • $("#btn_img_close").click()对未来元素是不生效的,试一下

    $("body").on("click", "#btn_img_close", function(){
    ...
    });
    2019-07-17 19:21:23
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载