解决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中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
微信小程序webview 脚手架使用详解
Jul 22 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实现微信公众平台发红包功能
2018/06/14 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Django中处理出错页面的方法
2015/07/15 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
世博会口号
2014/06/20 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫