叶雨梧桐BLOG

解决layer弹窗获取不到内容的问题

发布时间:2017年2月12日 / 分类:前端笔记 / 吐槽

重要的教训讲三遍

不仔细看文档做开发活该浪费时间!
不仔细看文档做开发活该浪费时间!
不仔细看文档做开发活该浪费时间!

问题描述

开发中使用到了layer弹窗组件,遇到了一个比较神奇的情况,jquery获取不到弹窗中input修改后的值,只能获取到初始的值。
尝试了text,val,attr 各种方法,都无法正常获取值。当弹窗dom部分固定在页面上时会出现这种情况,如果dom部分是动态加载的话,则能正常获取到修改后的值。

出问题的代码,以下如果使用$("#tag").val()获取值,无论选择哪个分类,总是为1
html部分

<div id="hellodemo">
<select id='tag'>
            <option value="1">分类1</option>
            <option value="2">分类2</option>
            <option value="3">分类3</option>
            <option value="4">分类4</option>
        </select>
</div>

js部分

var helloContent = $("#hellodemo").html();
$("#add").click(function(){
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', 
      area: ['420px', '240px'],
      content: helloContent
    });
});

正常的代码,以下代码可正常使用
html部分

<div id="hellodemo">
<select id='tag'>
            <option value="1">分类1</option>
            <option value="2">分类2</option>
            <option value="3">分类3</option>
            <option value="4">分类4</option>
        </select>
</div>

js部分

$("#add").click(function(){
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', 
      area: ['420px', '240px'],
      content: $("#hellodemo")
    });
});

问题原因

layer.open中的content是有多种形式的,可存在string,array,dom等等。出错的部分是因为获取原dom数据后传递过去的,做字符串处理了,所以无论怎样获取,怎样修改,都只会获取初始值1.修改成dom形式即可。另一种处理方式,则是将dom动态js添加,则能正常使用。

参考文档

http://www.layui.com/doc/modules/layer.html

标签:没有标签呢

版权声明:除特殊注明外,均由叶雨梧桐原创,转载请保留文章出处;
本文链接:http://blog.gt520.com/qdbj/372.html
订阅叶雨梧桐BLOG RSS
分类
最新文章
最近回复
  • 今日头条: 文章不错非常喜欢
  • 码客: 定时任务我直接用cron
  • 鸟叔: 此时此刻鸟叔想吟诗一首:梧桐夜雨涨秋迟……
  • 夏目贵志: 三年了后偶遇这博客了!
  • 钟水洲博客: 拜个早年
  • 鸟叔の窝: 最近一直在关注贵博客,加个友情链接可否?
  • 荆棘鸟: 请教博主 评论自动发邮件怎么弄 我的域名邮箱老是配置不成功咋回事?
  • thornbird: 为何这样麻烦 直接安装LNMP即可
  • 态度xiaomi: 支持下
  • 梦青年: 我的网站下线了,你可以把我的友链去掉了,感谢多年的支持和关注~ 梦青年。
归档