form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件。

原因是因为<button>标签默认的类型是submit,即默认的button点击就会触发表单的提交事件。

<button></button>
<!-- 两者是相当的 -->
<button type="sumbit"></button>

解决的办法有三个。

1.在<button>标签中添加属性type="button"。

<button type="button"></button>

2.将<button>标签改为<input>标签。

<input type="button" />

3.在button的点击事件中加入阻止默认事件执行的代码段(JavaScript/jQuery)。

$('button').on('click', function(e) {
e.preventDefault();
});

另外,其实现在一般是不建议使用button标签的,而是使用a标签做按钮,一个是样式的定制问题,一个就是上面的问题。

"人最强大的时候,不是坚持,而是放下。"

form表单中的button自动刷新页面问题的更多相关文章

  1. 点击 button 自动刷新页面

    问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...

  2. form表单中的button按钮

    如果在form表单中 , 存在button元素,button元素就充当了submit的角色

  3. Jquery实现form表单提交后局部刷新页面的多种方法

    最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...

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

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

  5. 如何阻止form表单中的button按钮提交

    <form action="#" method="post"> <input type="text" name=" ...

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

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

  7. form表单中新增button按钮,点击按钮表单会进行提交

    原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”

  8. 关于form表单中button按钮自动提交问题

    坑:点击确认按钮,form表单提交2次,发送后台2次请求 //错误代码: <Button id="btnSubmit" name="btnSubmit" ...

  9. 【小瑕疵】表单中的button会自动提交?

    在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...

随机推荐

  1. 《Java基础知识》一维,二维数组的申明和使用

    为什么要使用数组: 因为不使用数组计算多个变量的时候太繁琐,不利于数据的处理. --------   数组也是一个变量,是存储一组相同类型的变量 声明一个变量就是在内存中划出一块合适的空间 声明一个数 ...

  2. Linux下shell通用脚本启动jar(微服务)

    Linux下shell通用脚本启动jar(微服务) vim app_jar.sh #!/bin/bash #source /etc/profile # Auth:Liucx # Please chan ...

  3. 关于腾讯云Centos的一些操作

    安装mysql wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-commun ...

  4. SSM项目整合纪实

    一 前 言 本来是为了探究一些功能性问题,需要一套完整的项目架构,本以为SSM用过那么多了,轻松搭建不在话下,但是过程中还是遇到一些问题,踩到一些未曾料想的坑.博文以搭建极简架构为目的,附带一些关键阐 ...

  5. 在Windows10中安装与配置Nginx

    一.使用环境: Windows 10 1909 nginx 1.16.1 二.安装与配置: 1. 打开链接,http://nginx.org/en/download.html 下载稳定版本nginx ...

  6. java工作流系统-流程引擎执行自定义URL

    关键词:工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流    bpm工作流系统  java工作流主流框架  自定义工作流引擎 概要介绍: 用户在表达自己的业务逻辑时 ...

  7. 软件开发工具(第13章: Eclipse插件的使用与开发)

    一.插件简介 插件的定义(了解) 插件是一种遵循其所依附的软件的接口规范所编写出来的程序. 插件实际上是对原有软件的扩展,替应用程序增加一些所需要的特定 功能. 插件的构成(重点.记忆) 每个插件都由 ...

  8. 微信小程序—支付宝身份验证(支付宝小程序)

    查看应用:https://open.alipay.com/platform/keyManage.htm  这里找到您调用接口的应用 支付宝身份验证快速接入:https://docs.open.alip ...

  9. Unity-使用UnityRemote调试手机Android Studio打印日志

    抛出问题:  1.Unity调试Android的时候默认情况是build打包成apk,安装到手机运行,调试起来很不方便,如何快速在手机上运行呢?  2.如何像unity的console一样在andro ...

  10. 微信 电脑版 HOOK(WeChat PC Hook)- 远程线程注入dll原理

    Windows加载dll的特性 1.Windows系统中,每个exe软件运行的时候,会加载系统模块kernel32.dll 2.所有加载进exe软件的系统模块kernel32.dll,内存地址都是一样 ...