Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 733|回复: 0

jq+layui之table表每行的编辑按钮只能点击触发一次的问题的解决

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-4-19 05:22:01 | 显示全部楼层 |阅读模式

     

    【问题1描述】

      在写好表之后,测试时会发现,当你点击第一行的“修改”,突然不想修改了,关闭了“修改”的弹窗,但是这时候你想到刚才第一行的修改还有地方要修改,你重新点击“修改”按钮,这时候它似乎故意跟你过不去似的,修改的弹窗不出现了。

      干着急没用啊,我们要解决问题。

    【问题出现的原因】

      为什么会出现这个问题呢?我们来共同探索一下。

      在“修改”按钮的事件里面,我们遍历$(".layui-table-body tr")这个DOM元素,并打印出这个DOM元素的内容。我们点击第一行的修改之后,关闭弹窗,点击第二行,再关闭弹窗,再点击第三行。控制台的打印如下:

     

      由此可见,当“修改”按钮的事件被触发时,相应的tr就会被挂上layui-table-hover这个类。

    【解决方法】

      回归到我们出现bug的操作流程,我们把目标转向第一行,点击“修改”按钮,关闭弹窗,再一次点击刚才点击过的同一个“修改”按钮。这个问题我们用一行代码$(".layui-table-body tr").removeClass('layui-table-click');来解决问题。

    【问题2描述】

      关键问题(什么问题题目写得很清楚呢)解决完了,可是,你也许会遇到另外一个问题,在点击“取消”或者右上角的关闭按钮时,不能关闭弹窗,而是要再点击一次,才能关闭。这个问题不是人人都会遇到,但如果你的layer.open({...})写在for循环内,就有可能会遇到。

     

      (ps:由于功力尚浅,能想到的第一解决方案就是用e.preventDefault();但是没能实现,我的直觉告诉我,应该是可以的。哈哈哈,我的直觉不一定准,继续回到正文)

    【解决方法】

      解决的办法就是在操作二的最后添加一行return false;

    for(...){
    //操作1
    return false;
    //return false;后面没有其他操作
    }

     

     

      

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-23 00:42 , Processed in 0.055671 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表