叶雨梧桐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://gt520.com/qdbj/372.html

已有 5 条评论
  1. 啊啊 啊啊

    如果对象是隐藏的话还是不行

  2. 繁华落尽 繁华落尽

    我也是碰到了这种问题,求具体解决方案,谢谢

    1. 文中有解决方案,在【问题原因】里面,(ノへ ̄、)捂脸

  3. 你的博客也坚持写了4年啦!!!!!

    1. 嗯呐,断断续续的还更新着~~

订阅叶雨梧桐BLOG RSS
分类
最新文章
最近回复
  • 啊啊: 如果对象是隐藏的话还是不行
  • 通古思: PHP是世界上最好的语言!
  • 森七: 想转去ty,收藏了贵站肯定会用到 make
  • 寻芜兮: 博主您好,您写的《Xshell 进行科学上网的正确姿势》中图片已经挂掉了,可以再补档一次吗。
  • 天津网站建设: 感谢博主分享
  • 博客大全: 钻研精神会让你学到更多,加油!
  • 麦麦米: 不错的文章呢
  • 薇洛迪兰: 应该是服务器的问题吧
  • 关于我们: 弱弱的问下博主,接受友情链接吗?
  • 今日头条: 文章不错非常喜欢
归档