js生效后页面自动刷新的问题（js控制button，生效效果闪一下消失）解决

摘要: 遇到了js执行完成后自动刷新页面的问题。js生效后自动刷新导致js效果闪一下又消失

今天工作中需要用到js点击Edit按钮时把按钮变为submit，并且页面中asp.net控件改为可编辑状态（页面加载默认只读）。

遇到问题：点击Edit时，按钮闪了一下submit，页面可编辑闪了一下，又恢复了加载页面的默认只读状态。

问题原因：调试js找到原因是js执行结束后页面重新加载了一遍，导致js效果看起来闪了一下又失效了。<button type="submit" ></button>没注意这个type=submit， submit会默认提交数据，重新加载页面。

解决方法：把type=“submit”改为type=“button”即可。

1.按钮代码

[code=language-html]<button type="submit" id="EditOrSub" class="btn btn-success">Edit</button>

2.js

[code=language-javascript]<script type="text/javascript">
$("#EditOrSub").click(function () {
if ($("#EditOrSub").val() == "Edit") {
$("#EditOrSub").val("Submit");
$(":input").attr("readonly", false);
$("#listEdit").hide();

}
else if ($("#EditOrSub").val() == "Submit") {
//此处不展示了，省略
}
});
</script>

3.问题解决

[code=language-html]<button type="button" id="EditOrSub" class="btn btn-success">Edit</button>

以前经常用<input type="button"/> 很少用<button></button>所以没注意到。。随笔记下，希望遇到同样问题的朋友能看到，