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. python中super的用法实例解析

    概念 super作为python的内建函数.主要作用如下: 允许我们避免使用基类 跟随多重继承来使用 实例 在单个继承的场景下,一般使用super来调用基类来实现: 下面是一个例子: class Ma ...

  2. c++-zoo动物园

    面向对象抽象类写动物园 animal animal.h #pragma once #define _CRT_SECURE_NO_WARNINGS #include <iostream> u ...

  3. Nginx实现负载均衡时常用的分配服务器策略

    场景 Nginx配置实例-负载均衡实例:平均访问多台服务器: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103019576 在 ...

  4. JS---案例:点击按钮设置div背景色渐变

    案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...

  5. 【译】ModSecurity事务生命周期

    本篇简要介绍ModSecurity Transaction Lifecycle,也即ModSecurity的事务生命周期. Transaction Lifecycle In ModSecurity, ...

  6. IOS弓箭传说的插件开发

    1.导出ipa进行解压后,定位到执行程序archero,ida加载后,发现很多都是sub_xxx开头的. 2.搜索资料后,原来Unity编写的程序,可以使用Il2CppDumper进行符号表还原. 下 ...

  7. Android 线性布局 LinearLayout

    垂直布局 vertical <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  8. Linux kernel中常见的宏整理

    0x00 宏的基本知识 // object-like #define 宏名 替换列表 换行符 //function-like #define 宏名 ([标识符列表]) 替换列表 换行符 替换列表和标识 ...

  9. 最新IDEA永久激活

    此教程已支持最新2019.2版本 本教程适用Windows.Mac.Ubuntu等所有平台. 激活前准备工作 配置文件修改已经不在bin目录下直接修改,而是通过Idea修改 如果输入code一直弹出来 ...

  10. springcloud Config 入门,带视频

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...