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

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

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

 

1.按钮代码

<button type="submit" id="EditOrSub" class="btn btn-success">Edit</button>

2.js

<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.问题解决

 

 

<button type="button" id="EditOrSub" class="btn btn-success">Edit</button>

 

 

 

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

转载于:https://my.oschina.net/CrazyBoy1024/blog/698724