jQuery为何无法操作弹出层元素?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-05-31 10:02:02 1719 1

问题很简单,点击图片,弹出层出现,点击弹出层上的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);
   });
});

如下图。

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:21:23

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

    $("body").on("click", "#btn_img_close", function(){
    ...
    });
    0 0
相关问答

0

回答

jQuery的选择器有什么?

2021-11-12 17:21:12 112浏览量 回答数 0

2

回答

jquery选择器无效

2016-07-14 16:11:08 2563浏览量 回答数 2

1

回答

在jquery的选择器的写法上有点疑问

2016-07-13 17:07:01 1414浏览量 回答数 1

1

回答

Jquery 选择器问题!!!!!

2016-07-08 10:54:17 1339浏览量 回答数 1

1

回答

jquery选择器的问题

2016-07-06 15:57:15 1480浏览量 回答数 1

2

回答

jQuery 选择器 不能选择匿名函数里创建的jquery对象吗?

2016-06-23 16:29:02 1836浏览量 回答数 2

1

回答

关于jQuery选择器的问题

2016-05-30 10:48:09 1672浏览量 回答数 1

1

回答

一个关于 JQuery选择器的问题!

2016-05-27 09:35:15 1742浏览量 回答数 1

1

回答

Jquery选择器使用的问题

2016-03-18 14:09:53 1504浏览量 回答数 1

1

回答

jQuery选择器问题,请大神赐教

2016-03-17 11:54:34 1422浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载