解决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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python之django母板页面的使用
2018/07/03 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
商场端午节活动方案
2014/01/29 职场文书
三年级学生评语
2014/04/23 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
党员评议自我评价
2015/03/03 职场文书
导游词之安徽九华山
2019/09/18 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技