现在的位置: 首页 > IT运维 > 正文

js弹出层无法获取元素值或取值为空的解决办法

2014年10月19日 IT运维 ⁄ 共 2410字 暂无评论 ⁄ 被围观 386+

使用js弹出层时,我们一般在页面中先将要弹出的层隐藏(style="display:none"),需要显示时将其使用position定位至需要的位置并设置显示。如果我们直接设置显示,一般在提交其中的表单时不会有问题,但有时我们是采用克隆clone的办法显示的,那么在整个动作完成后,页面中的元素集就有了双份,那么我们再通过class或者id获取元素值时就会获得空值,解决办法是:找到确定元素唯一性的办法。

举例说明:

<!--本示例使用jQuery.tipswindow弹出层,其方法就是先隐藏层,然后将曾内容克隆至position定位的div内#windownbg-->
<style type="text/css">
body{margin:0px;padding:0px}
.posb{height:120px;line-height:30px;margin:5px 10px;border:1px solid #ccc;color:#555;font-size:13px;}
#beizhu{width:100%;height:100%;border:none;background-color:#ECF9FF;}
.btnbox{text-align:center;padding:10px;}
#windownbg{display:none;position:absolute;width:100%;height:100%;background:#000;top:0;left:0;}
#windown-box{position:fixed;_position:absolute;background:#FFF;border:1px solid #eee;text-align:left;}
#windown-title{position:relative;height:37px;line-height:27px;text-align:center;border-bottom:1px solid #ccc;overflow:hidden;background:url(tipbg.png) 0 0 repeat-x;}
#windown-title h2{position:relative;left:10px;top:5px;font-size:14px;color:#666;}
#windown-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(tipbg.png) 100% -49px no-repeat;cursor:pointer;}
#windown-content-border{position:relative;top:-1px;padding:5px 0 5px 5px;}
#windown-content img,#windown-content iframe{display:block;}
#windown-content .loading{position:absolute;left:50%;top:50%;margin-left:-8px;margin-top:-8px;}
</style>

<div class="posb">
	<textarea id="beizhu" name="beizhu" placeholder="备注"></textarea>
</div>
<div class="btnbox"><input type="button" class="confirmBtn" value="提 交" id="confirmTerm"></div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="tipswindown.js"></script>
<script type="text/javascript">
function showTipsWindown(title,id,width,height){
	tipsWindown(title,"id:"+id,width,height,"true","","true",id);
}
function popTips(){
	showTipsWindown("工作计划", \'qdw\', 310, 265);
}
jQuery(document).ready(function(){
	popTips();
	jQuery(".confirmBtn").click(function(){
		var msg=jQuery(\'textarea#beizhu\').val();
		alert(msg)
	});
});
</script>

按照常规方法:

var msg=jQuery(\'textarea#beizhu\').val();
alert(msg)

一般取到的是空值。解决办法很简单,既然知道是克隆过去的,那么在目标位置寻找元素的唯一性确定这个元素就可以了。使用firebug查看,我们看到如下图:

js弹出层取不到元素值

js弹出层取不到元素值

从图中看到,我们的目标元素被克隆到了id为windown-content的div之内,那么唯一确定目标textarea的方法就变成:

var msg=jQuery(\'#windown-content\').find(\'textarea#beizhu\').val();
alert(msg)

OK,打完收工!

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#