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'> > </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
条回答
写回答
写回答
-
$("#btn_img_close").click()对未来元素是不生效的，试一下$("body").on("click", "#btn_img_close", function(){ ... });2019-07-17 19:21:23赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
