采用layui的美化时保留select里面的change事件

采用layui的美化时保留select里面的change事件

很多小伙伴遇到美化了之后里面的change事件不触发了这个问题,以前的建议就是既然使用layui的组件,就充分利用他,他对应的也提供了表单的select事件,但是如果这些节点以前就存在了后来用了layui岂不是都要去把对应的事件搬过来。

推荐:layui使用教程

有没有一个什么方式既可以用美化,又保留事件的,这个答案是肯定的,而且可能方式有很多种,这里提供一种我觉得算是最简洁方便的改法提供参考。

效果图:

1.gif

可能看图看不出啥玩意,看关键代码吧,图里面的弹出信息实际上是绑定在select的事件弹出来的

1.jpg2.jpg

关键的处理

3.jpg

测试代码: https://pan.baidu.com/s/1aZj6MnfL5w4FNFryprPqxw

然后如果有小伙伴发现改了之后没有加lay-filter的节点选择之后会触发两次原来绑定的事件,这个也请移步到我刚才提到的那个帖子里面有介绍,这个应该是layui本身存在的一个bug。我的最新修改如下。

4.jpg

被注释的两行是原来的代码,换成下面的一行,修改了对会不会有不良影响?这个可以放心,不会有任何不良的影响。

以上就是采用layui的美化时保留select里面的change事件的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3005999.html

(0)
上一篇 2025年3月13日 01:06:39
下一篇 2025年3月13日 01:06:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 数据表格自动分配列宽的一种实现方法

    layui数据表格自动分配列宽效果图: 适用场景:主要是解决窗口大小改变后表格尾列出现空白和滚动条的问题-窗口由小变大,出现表格尾列出现空白 窗口由大变小,出现横向滚动条 重新加载框架后恢复正常 使用前提: -每一列的表头必须全部设置min…

    2025年3月13日 编程技术
    000
  • 基于layui的步骤条面板(附代码)

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,下面我们来看一下基于layui的步骤条面板实现。 html元素             条目1        条目2   …

    2025年3月13日
    200
  • LayUI第三方插件开发规范详解

    本规范一共四件事:1、规定插件的目录使用,2、规定插件css样式的前缀,3、规定插件的统一封装,4、规定插件的引入方式。 一、目录篇 先来一个目录图 目录结构说明(结合图片理解)mod_name代表插件名,author代表第三方作者 lay…

    2025年3月13日 编程技术
    200
  • Layui table组件相关介绍

    出现的问题: 1、使用 Layui 官方提供的 【转换静态表格】 方式初始化加载时报 id 找不到的错误(自己的锅) 2、传递参数问题 使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 tab…

    2025年3月13日
    200
  • layui入门总结

    获得 Layui 你可以在官网首页下载到 Layui 的最新版,也可以通过 GitHub 得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目,推荐你直接从官网下载。layui构建后的结构(也就是你获得的包) ├─…

    2025年3月13日
    200
  • layui复选框使用介绍

    layui复选框: 效果图 layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样 layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置 html代码使用了jfi…

    2025年3月13日
    200
  • layui事件监听使用

    在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了。 具体语法: form.on(‘event(过滤器值)’, callback); 登录后复制 可以用于监听:select,checkb…

    2025年3月13日
    200
  • 为layDate输入框加上图标的方法(附代码)

    为layDate输入框加上图标的方法: 基于layui 2.3.0-rc1 为laydate输入框加上图标,让laydate输入框更显眼 先看图片 修改的地方 修改模块css laydate.css里添加: .laydate-with-ic…

    2025年3月13日
    200
  • layui自定义字体图标图文教程

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont 第一步,通过浏览器打开  http://iconfont.cn/ ,访问阿里巴巴矢量图标库。 第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账…

    2025年3月13日 编程技术
    200
  • .net mvc+layui做图片上传图文详解

    图片上传和展示是互联网应用中比较常见的一个功能,本文图片上传功能前端用到的图片上传控件是layui ,数据库是用的 sql server ,code first开发模式。 一、创建表 因为图片上传之后需要保存路径等信息,所以,得先建一个Im…

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论