layui点击按钮页⾯会⾃动刷新的解决⽅案
问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
input标签placeholder属性<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点击按钮页⾯会⾃动刷新的解决⽅案就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家
多多⽀持。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论