问题:为什么点击 button 会刷新页面 ?

原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦。

<button> 放在 form 里边, 除了 IE 中 默认 type = "button",  其他浏览器默认 type = "submit"  具有表单提交功能。

解决方案:

一 :修改 按钮的 书写方式 ,改为 <input type="button"> ;

二 :阻止默认事件, 在button的点击事件中加入“e.preventDefult()”   

$('btn').click(function(e){

         e.preventDefult();

});

点击 button 自动刷新页面的更多相关文章

  1. 点击button自动刷新页面的奇葩错误

    以前在写练习的时候遇到过这样一个问题,自己在html中写了一个button <button>test1</button> 在没有给其附上onclick事件时是点击是不会有任何反 ...

  2. form表单中的button自动刷新页面问题

    form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...

  3. HTML Button自动刷新页面的问题

    一.问题<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99& ...

  4. layui点击按钮自动刷新页面问题

    问题 <button class="layui-btn layui-btn-primary" onclick="findData()">查询< ...

  5. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  6. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  7. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  8. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  9. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

随机推荐

  1. linux centos7 和 windows下 部署 .net core 2.0 web应用

    centos7 下部署asp.net core 2.0应用 安装CentOS7 配置网络[可选] 安装.Net core2.0 创建测试Asp.net Core应用程序 正式部署项目 安装VMware ...

  2. Velocity中判断表达式是不是为空

    Velocity中判断表达式是不是为空 $if ($null.isNull($mycoll) || $mycoll.size()==0) ${}与$!{}区别 例子: ${str}:如果str没有值, ...

  3. chrome安装工具

    0x00 简介 今天在知识星球的小迪渗透吧对外交流群里看到Web安全从业者必备Chrome插件这篇帖子,看完之后,我虽然还是个学生,但我也是个垃圾啊.我的chrome上面没有一个上面描述的工具,真的是 ...

  4. vue 升级element-ui woff文件404

    一.build文件下utils.js下增加 publicPath:'../../' 二. 同样的代码环境,用yarn来安装依赖后启动运行正常,而采用npm安装依赖则有类似问题.当然,这个和yarn或者 ...

  5. css概述二

    四.尺寸和边框 1.尺寸属性 ①作用 设置元素的宽度和高度 ②属性 width:宽度 max-width:最大宽度 min-width:最小宽度 height:高度 max-height: min-h ...

  6. Quartz3.0定时任务学习之异步调度器

    前言 Quartz3与Quartz2的主要区别有两点: 1,Quartz3将它的资源类库拆的更细了,比如,想使用Quartz3开发,最少要引用Quartz,Quartz.Jobs,Quartz.Plu ...

  7. poj3680 最大权不相交路径

    Intervals Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 8587   Accepted: 3662 Descrip ...

  8. Pyqt5_QtextEdit

    QtextEdit QTextEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,Qtextedit不仅可以用来显示文本还可以用来显示HTML ...

  9. JAVA反射整理总结

    //1.通过对象获取            Person p=new Person();            Class c=p.getClass();                //2.通过类 ...

  10. layui 数据表格使用

    //第一个实例 table.render({ elem: '#demo' ,height: 400 ,url: '/My_NewsTest/LookServlet' //数据接口 ,page: tru ...