layui点击按钮页面会自动刷新的解决方案
时间：2021-04-16 08:24:54|栏目：JavaScript代码|点击： 次
问题：
<!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>
栏 目：JavaScript代码
本文地址：http://www.codeinn.net/misctech/102357.html
