layui点击按钮页面会自动刷新的解决方案
更新时间：2019年10月25日 10:29:38 作者：扎哈的信徒
今天小编就为大家分享一篇layui点击按钮页面会自动刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题：
<!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点击按钮页面会自动刷新的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了微信小程序订阅消息(java后端实现)开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了JavaScript闭包，闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现2017-06-06
这篇文章主要介绍了JavaScript onclick事件使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
本文主要介绍了JavaScript基本类型值-Number类型的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了 Bootstrap Table使用整理(五)之分页组合查询的实例代码，非常报错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
js 下拉菜单实现代码，原理比较简单，需要的朋友可以参考下，具体的美化要靠自己。2010-05-05
本文主要介绍了js前端URL含有特殊字符的转码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
本篇文章主要分享了js实现带简单弹性运动导航条的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要给大家介绍了关于Javascript中将变量转换为字符串的三种方法，这三种方法分别是：value.toString()、"" + value和String(value)，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
最新评论