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

赞 (0)

相关推荐

  • 解决Layui 表单提交数据为空的问题

    坑的外观 最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的. 今天踩了个坑,就是使用layui表单提交时,提交的数据为空. 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象. <form class="layui-form" action=""> <div class="layui-form-item"> <label cla

  • layui 对弹窗 form表单赋值的实现方法

    目的: 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内.如下图: Html 代码: <body> <div class="layui-form" lay-filter="useradmin" id="useradmin"> <div class="layui-form-item"> <label class="layui-form-label">用  户

  • layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪怕是button标签呢,也不行.我试了一下,使用这种情况的话,主要是在监听事件中并没有返回return false,如果返回了return false,这个就可以不再刷新. 2.提交表单,获取不到form表单中的数据. 有人说,是因为给了一个id,并没有给name属性,用惯了jquery.我懒得去找

  • layui 解决form表单点击无反应的问题

    无刷新页面再次操作form表单 时,点击无效果 重点来了!解决方法!需要form.render(); 代码如下: <script> layui.use('form', function(){ var form = layui.form,$ = layui.jquery; form.render();//重点在这里 }); </script> 以上这篇layui 解决form表单点击无反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 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 no

  • 利用JS实现点击按钮后图片自动切换的简单方法

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html

  • layui点击按钮添加可编辑的一行方法

    昨天已经成功添加了一行,今天希望所添加的一行可以进行单元格编辑. 然而,发现添加了edit:'text'以后也不可以进行单元格编辑,而原本已有的数据可以,因此通过浏览器调试看了原有数据的样式,如图所示: 因此,将点击按钮添加一行<tr>标签的方法,修改为如下: $("#addTable").click(function(){ var tr=" <tr>"+ " <td data-field='domainId' data-ed

  • 框架页面高度自动刷新的Javascript脚本

    实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • javascript 页面只自动刷新一次

    1.看看下面这段代码 复制代码 代码如下: <Script> function reurl(){ url = location.href; //把当前页面的地址赋给变量 url var times = url.split("?"); //分切变量 url 分隔符号为 "?" if(times[1] != 1){ //如果?后的值不等于1表示没有刷新 url += "?1"; //把变量 url 的值加入 ?1 self.locatio

  • 页面自动刷新，不用按回车键来提交数据！

    如果页面要自动刷新,但该页面有Request.Form,那么通常会出现一个提示框,需要用户确定来提交数据,这就不是自动刷新了.而对于监控或股票显示来说,不要用户干预又非常重要,下面就可以解决该问题: <Script Language="JavaScript"><!--var limit="0:60"                    //定义刷新时间 if (document.images){var parselimit=limit.split

  • layui实现点击按钮给table添加一行

    •问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能: •原先我写的table是这样实现的: $("#addTable").click(function(){ var tr=" <tr>"+ " <td>11</td>"+ " <td>22</td>"+ " <td>33</td

  • 浅谈webpack 自动刷新与解析

    前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整:而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下:另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去).所以如果要用手工刷新浏览器和手动(或点击)发布,还要启动站点,确实是个不小的体力活.而这三点webpack可以帮我们做到. webpack-dev-serverwebpack 是通过webpack-dev-server(

  • Android中AlertDialog 点击按钮后不关闭对话框的功能

    Android中AlertDialog 点击按钮后不关闭对话框的功能

    这里的问题:当我点击确定按钮,也就是 AlertDialog 里的 PositiveButton 的时候,我们需要判断用户是输入是否符合我们的预期,如果不符合通常提示用户重写输入,且不关闭当前的对话框,但上图中点击按钮后会自动的关闭窗口. 先看原来的这个是怎么写的: private void openDialog() { LinearLayout linearLayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.l

  • layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

    其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下 点击左侧菜单栏只刷新局部,局部就用iframe. 首先先建layout页,建左侧菜单栏,然后下面的@RenderBody() <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="la

随机推荐