layui点击按钮页面会自动刷新的解决方案

发布日期： 2026-01-12 阅读量： 作者： 用户投稿

问题：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" rel="external nofollow" >
</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" >test</button>
 </div>
 </div>
</form>
 
<script src="../../layuiadmin/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("test");
 });
 });
</script>
</body>
</html>

点击test按钮后，应该弹出信息“test”，但是运行后没有弹出信息，而是页面刷新了。

原因：

button,input type=button按钮在IE和w3c，firefox浏览器区别：

当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。

但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

解决办法：

方法一：将button标签更换为input

<input class="layui-btn test" >test</input>

方法二：

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

以上这篇layui点击按钮页面会自动刷新的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇: Docker Compose 网络设置详解

下一篇: 在 Laravel 中动态隐藏 API 字段的方法

layui点击按钮页面会自动刷新的解决方案

随便看看

南昌壹佳企网络通信有限公司