- N +

layui 点击按钮页面会自动刷新

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://www.layuicdn.com/layui/css/layui.css">
</head>

<body>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn test">测试</button>
            </div>
        </div>
    </form>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
        layui.use(['laytpl', 'jquery', 'layer', 'form'], function() {
            var laytpl = layui.laytpl,
                layer = layui.layer,
                form = layui.form,
                $ = layui.$;

            $('.test').click(function() {
                layer.msg("测试成功");
            });
        });
    </script>
</body>

</html>

点击测试按钮后,应该弹出信息“测试成功”,但是运行后页面刷新了。

原因

button 的 type 属性,Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

解决

为按钮规定 type 属性。

<button type="button" class="layui-btn test" >测试</button>


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共人参与)参与讨论

    还没有评论,来说两句吧...