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


Posted in Javascript onOctober 25, 2019

问题:

<!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>

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

点击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点击按钮页面会自动刷新的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
js自定义回调函数
Dec 13 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 #Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
JS实现简单tab选项卡切换
Oct 25 #Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 #Javascript
JS实现骰子3D旋转效果
Oct 24 #Javascript
You might like
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python 负数取模运算实例
2020/06/03 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
寄语是什么意思
2014/04/10 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
法律意见书范文
2015/06/04 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫