解决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中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
javascript页面倒计时实例
Jul 25 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
Vue 数据绑定的原理分析
Nov 16 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
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php发送邮件的问题详解
2015/06/22 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
用matplotlib画等高线图详解
2017/12/14 Python
python绘制双柱形图代码实例
2017/12/14 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
前台领班岗位职责
2013/12/04 职场文书
马智宇结婚主持词
2014/04/01 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
详解python的异常捕获
2022/03/03 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB