解决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 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
如何离线执行php任务
2017/02/21 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
python实现控制COM口的示例
2019/07/03 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python 制作本地应用搜索工具
2021/02/27 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
读书伴我成长演讲稿
2014/05/07 职场文书
电子专业自荐信
2014/07/01 职场文书
法人委托书
2014/07/31 职场文书
法院授权委托书格式
2014/09/28 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python