真是自己给自己挖坑,坑死人不偿命啊。

  在用layui开发时,遇到这种情况,点击按钮出现一个弹出层,然而我不是用button按钮去实现的,而是用a标签做的,本来a标签也是可以实现的,在这里我无形中给自己挖了个坑。然后绕进去好半天不知道问题出在哪,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../dist/css/layui.css">
</head>
<body>
<a href="" class="layui-btn" id="btn">弹出层</a>
<script src="../dist/layui.js"></script>
<script src="../dist/jquery.min.js"></script>
<script>
layui.use('layer',function(){
var layer = layui.layer;
$("#btn").click(function(){
layer.confirm('确定要删除吗?',{icon: 3, title:'提示'},function(index){
layer.close(index)
})
})
})
</script>
</body>
</html>

  这样看似没问题,实则无法实现预期的弹出层效果,因为a是一个超链接,点击后会默认有跳转行为,因而弹出层事件只能短暂触发,而后迅速消失。

  其实要解决这个问题,有几种办法,其一,直接删除href属性即可解决。其二、给href属性赋值,使其等于javascript:void(0); 这样就可以阻止超链接的跳转行为,也可以解决问题。其三,就是不使用a标签,而改用button按钮,就可以避免这个问题

关于layer的坑的更多相关文章

  1. CV基础知识点深入理解

    BN实现: Batch Normalization学习笔记及其实现: BatchNormalization 层的实现 使用Python实现Batch normalization和卷积层 Batch N ...

  2. Jquery ajax 同步阻塞引起的UI线程阻塞的坑(loading图片显示不出来,layer.load延迟)

    今天想做一个点击地市用ajax重新获取数据刷新页面功能,因为ajax属于耗时操作,想在获取数据且加载页面时显示加载遮罩层,结果发现了ajax的好多坑. 例如如上栗子,我想点击按钮让遮罩层显示,ajax ...

  3. ayui弹出层闪退,layer弹出层闪退,layer弹出层坑

    今天用layui的弹出层插件,发现两奇怪的问题: 1.弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2.绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说: ...

  4. tf.keras遇见的坑:Output tensors to a Model must be the output of a TensorFlow `Layer`

    经过网上查找,找到了问题所在:在使用keras编程模式是,中间插入了tf.reshape()方法便遇到此问题. 解决办法:对于遇到相同问题的任何人,可以使用keras的Lambda层来包装张量流操作, ...

  5. Mono+Jexus部署C# MVC的各种坑

    如果你看到这篇文章,先别急着动手,过完一遍,确定是你要的再动手. 别人提到的这里不赘述,只说查了好久才知道的. 1号坑:System.IO.FileNotFoundException Could no ...

  6. FastClick 填坑及源码解析

    最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置: 如上图,具体表现是较快点击时,光标总会跳到 textarea 内容的尾部.只 ...

  7. AngularJS结合RequireJS做文件合并压缩的那些坑

    我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...

  8. 避开unity的坑(转摘)

    避开unity的坑(转摘) 以下总结一部分来自经验之谈,一部分来自其他人的分享.总的来讲,unity开发原型和效果.验证想法,确实是无比便利.可能一个月就把核心玩法做得差不多.强大的编辑器功能让我们也 ...

  9. 文件夹管理工具(MVC+zTree+layer)(附源码)

    写在前 之前写了一篇关于 文件夹与文件的操作的文章  操作文件方法简单总结(File,Directory,StreamReader,StreamWrite )  把常用的对于文件与文件夹的操作总结了一 ...

随机推荐

  1. sql经典试题

    1.一道SQL语句面试题,关于group by表内容:2005-05-09 胜2005-05-09 胜2005-05-09 负2005-05-09 负2005-05-10 胜2005-05-10 负2 ...

  2. userdel 命令详解

    userdel  作用: 删除指定用户,以及用户相关的文件. 如不加选项,则仅删除用户账号,而不删除相关文件 选项: -f:强制删除用户,即时用户当前已登录 -r:删除用户的同时删除与用户相关的所有文 ...

  3. windows10合并分区

    删除无用分区 将分区D合并到分区C,"计算机"---右键"管理"--"磁盘管理" 点击分区名,右键选择删除卷,如果有数据,提前备份 扩展分区 ...

  4. longest valid parentheses方法归纳

    题目大意见leetcode,下面我稍微介绍下想到的三种方法: 方法一:不用栈去找匹配 建立一个数组l2表示匹配,然后i从0开始,看到 ( 就把l2对应的数值记为-1,直到看到 ),找到)以后,从当前i ...

  5. vuex 基本用法、兄弟组件通信,参数传递

    vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦. vuex大概思路:a=new Vue(),发射数据'msg':a.$emit ...

  6. css-display

    1. none:隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 2. inline:指定对象为内联元素. 3. block:指定对象为块元素. 4. inl ...

  7. Android-AnsyncTask异步任务

    同步和异步的概念区别: 同步,必须执行完成某个问题后才能继续执行其他的. 异步,我会去先执行其他问题,你执行完之后返回给我一个结果就可以. android中为什么要引用异步任务呢 android启动的 ...

  8. ZZ_INEERNAL每个栏位的含义

    ZZ_INEERNAL包含10列,每列之间用,隔开 第一列:exception class,有KE/NE/JE/EE等 第二列:pid 第三列:tid 第四列:固定是99 第五列:固定是/data/c ...

  9. MariaDB扩展特性--虚拟列

    存在于表中的列,它们的值是根据确定的表达式或者是根据表中其他列的值自动计算的. 虚拟列有两种,分别对应了定义虚拟列的修饰关键词: 'VIRTUAL'修饰词含义为该虚拟列的值会在查询的时候计算生成. ' ...

  10. DeepLearning.ai学习笔记(四)卷积神经网络 -- week3 目标检测

    一.目标定位 这一小节视频主要介绍了我们在实现目标定位时标签该如何定义. 上图左下角给出了损失函数的计算公式(这里使用的是平方差) 如图示,加入我们需要定位出图像中是否有pedestrian,car, ...