form表单中的button自动刷新页面问题
2019-11-14 07:31
1746 查看
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标签做按钮,一个是样式的定制问题,一个就是上面的问题。
"人最强大的时候,不是坚持,而是放下。"
相关文章推荐
- 关于button按钮自动提交表单刷新页面问题
- form表单底下 button自动提交表单,导致页面刷新
- js生效后页面自动刷新的问题(js控制button,生效效果闪一下消失)解决
- 浏览器的自动补全问题 autocomplete,刷新页面表单元素还是展示修改后的值
- Ajax提交Form表单页面仍会刷新问题
- 页面点击button自动提交form表单的解决办法
- form表单底下的button按钮点击自动提交恶心问题的解决
- form表单下的button按钮会自动提交表单的问题
- bootstrap表单按回车会自动刷新页面的问题
- form表单下的button按钮会自动提交表单的问题
- easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;
- 很奇怪的问题。点击button会自动刷新页面?
- form表单下的button按钮会自动提交表单的问题
- form表单下的button按钮会自动提交表单的问题
- 点击form表单中的button会触发页面刷新
- bootstrap表单按回车会自动刷新页面的问题
- Form表单中的button导致页面刷新而无法进入Ajax请求回调函数
- form表单下的button按钮会自动提交表单的问题
- form中的button按钮在IE11中自动提交表单问题导致弹出框关闭之后表单被重置
- 解决Button自动刷新页面的问题