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 相关文章推荐
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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
关于时间计算的结总
2006/12/06 PHP
解析link_mysql的php版
2013/06/30 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
前端性能优化建议
2020/09/17 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
分析python切片原理和方法
2017/12/19 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python 实现list或string按指定分段
2019/12/25 Python
Python json转字典字符方法实例解析
2020/04/13 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
《最大的“书”》教学反思
2014/02/14 职场文书
承诺书模板
2014/08/30 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
党员检讨书
2014/10/13 职场文书
业务员岗位职责范本
2015/04/03 职场文书
运动会班级前导词
2015/07/20 职场文书
开工典礼致辞
2015/07/29 职场文书
学生会主席任命书
2015/09/21 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle