真是自己给自己挖坑,坑死人不偿命啊。
在用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按钮,就可以避免这个问题