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 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP可变函数学习小结
2015/11/29 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php经典趣味算法实例代码
2020/01/21 PHP
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
js实现常用排序算法
2016/08/09 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
优秀教师获奖感言
2014/01/31 职场文书
离职保密承诺书
2014/05/28 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
英文自荐信范文
2015/03/25 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
浅谈Python数学建模之线性规划
2021/06/23 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers