点击form 表单中的button导致页面刷新问题
时间:2022-06-19
本文章向大家介绍点击form 表单中的button导致页面刷新问题
,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
做点击按钮切换背景样式与内容的时候每次都刷新页面 ,发现button写在了form
标签当中
<form>
<!-- ... -->
<button>提交</button>
</form>
原因分析:
在form表单里的button,不给button添加type属性,点击按钮,button的类型会默认为submit,会默认提交表单并刷新页面。
将input或者button的type属性改为button
,点击按钮页面就不会自动重新加载了。
<button class="btn btn-success margin_r20" id="startTest" type="button">开始调试</button>
$("#startTest").click(function(){
$(".stateOnline").css("display","inline-block");
if($(this).hasClass("btn-success")){
alert("hi")
$(this).text("停止调试")
$(this).removeClass("btn-success").addClass("btn-warning")
}
else if($(this).hasClass("btn-warning")){
$(this).text("开始调试")
$(this).removeClass("btn-warning").addClass("btn-success")
}
})
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2758nhrdof0gg
(adsbygoogle = window.adsbygoogle || []).push({});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端多线程大文件下载实践,提速10倍(拿捏百度云盘)
- docker 中的mysql 经常重启优化
- python MultipartEncoder传输zip文件实例
- 当Flutter遇到节流与防抖的思路和流程优化
- 花样使用Handler与源码分析
- 几个你不知道的Git小命令,却收获快乐。
- Flutter路由的跳转、动画和传参详解(最简单)
- ObjectAnimator属性动画源码分析篇
- 谈谈 React 5种最流行的状态管理库
- Android动态时钟壁纸开发
- Python读取配置文件(config.ini)以及写入配置文件
- Django {{ MEDIA_URL }}无法显示图片的解决方式
- python将音频进行变速的操作方法
- 解决django的template中如果无法引用MEDIA_URL问题
- 从源码解读 - Vue常考面试题