解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题


Posted in Javascript onSeptember 25, 2019

弹出某个层时需要给层取名(赋值)

var = ggLayer = layer.open({
        type: 1,
        content: $('.choose-gg').html(),
        anim: 'up',
        style: 'position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:10px 0; border:none;'
       });

layer.closeAll(); 关闭遮罩层

layer.close(ggLayer);关闭弹窗

使用layer.open弹出页面时,将页面内容设入content属性中,有时候直接将页面的元素放进来,比如$("xxx").html().

容易掉进坑的地方来了,这样设置实质是layer将你的页面html复制出来一份,新生成的弹出框已经不是你原来写的了

所以,如果你给input起了个id并用id获取input的值,实质上获取的是原本页面的input的值(第一个input),不是layer生成的页面的input(第二个input),而你输入的地方是layer生成的input(第二个),所以只能获得input默认自带的值而获取不到刚输入的值。

解决办法:

给input起个class,不要id,获取input的值得时候要用$(".xxx").eq(1).val(),获取生成的第二个input的值,你会发现成功可以获取了

console.log($(".reasonContent2").eq(1).val())

以上这篇解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
js处理表格对table进行修饰
May 26 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 #Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 #Javascript
layer 关闭指定弹出层的例子
Sep 25 #Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 #Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 #Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 #Javascript
layui prompt 设置允许空白提交的方法
Sep 24 #Javascript
You might like
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
javascript 操作符(~、&、|、^、)使用案例
2014/12/31 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
天网面试题
2013/04/07 面试题
办理暂住证介绍信
2014/01/11 职场文书
门前三包责任书
2014/04/15 职场文书
给校长的建议书500字
2014/05/15 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
国防教育标语
2014/10/08 职场文书
慰问信模板
2015/02/14 职场文书
导游词之桂林
2019/08/20 职场文书
导游词之青岛崂山
2019/12/27 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang