文档章节

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

刘昌鑫
 刘昌鑫
发布于 2016/06/21 23:17
字数 333
阅读 45
收藏 0

    今天工作中需要用到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>所以没注意到。。随笔记下,希望遇到同样问题的朋友能看到,

© 著作权归作者所有

共有 人打赏支持
刘昌鑫
粉丝 6
博文 73
码字总数 20757
作品 0
海淀
后端工程师
私信 提问
微信小程序-01-项目组成文件介绍(入门篇)

自古开篇先说两句,写这些笔记不是学习用的,主要是后续分享一些遇到的坑,碰到过什么样的问题,怎么去解决,如果你不是一个很耐心无看文章的人,建议去 网易云课堂找一些课程,跟着别人的脚...

肖朋伟
09/15
0
0
用JS去掉IE窗口的标题栏、工具栏、导航栏等。

前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息 、警告、欢迎光顾之类的话或者作者想...

donny945
2014/03/31
0
0
webpack4.x 入门一篇足矣

前言: webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,...

eternalless
06/22
0
0
Google Chrome调试js代码

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多...

君子之耀
2013/11/18
0
1
JSF页面中使用js函数回调后台bean方法并获取返回值的方法

由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统、详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还...

码上中国博客
2015/04/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 教程:在 Confluence 中导航

当你对 Confluence 有所了解后,你会发现 Confluence 使用起来非常简单。这个教程主要是针对你使用的 Confluence 界面进行一些说明,同时向你展示在那里可以进行一些通用的任务和操作。 空间...

honeymose
29分钟前
2
0
sed, awk 练习

1. sed打印某行到某行之间的内容 2. sed 转换大小写 将单词首字母转化大写 将所有小写转化大写 3. sed 在某一行最后面添加一个数字 4. 删除某行到最后一行 解析: {:a;N;$!ba;d} :a : 是...

Fc丶
今天
2
0
babel6升级到7,jest-babel报错:Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

自从将前端环境更新到babel7,jest-babel之前是基于babel6的,执行时候就会报:Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 很烦,因为连续帮好几台电脑修复这个问题,所以记...

曾建凯
今天
1
0
探索802.11ax

802.11ax承诺在真实条件下改善峰值性能和最差情况。 如何改善今天的Wi-Fi? 在决定如何改进当前版本以外的Wi-Fi时,802.11ac,IEEE和Wi-Fi联盟调查了Wi-Fi部署和行为,以确定更广泛使用的障碍...

linuxprobe16
今天
2
0
使用linux将64G的SDCARD格式化为FAT32

一、命令如下: sudo fdisk -lsudo mkfs.vfat /dev/sda -Isudo fdisk /dev/sda Welcome to fdisk (util-linux 2.29.2). Changes will remain in memory only, until you decide to wri......

mbzhong
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部