元素设置为display:none,其绑定的事件仍存在
该文章在2020年1月份进行了重写,文章地址: html元素设置display为none,绑定的事件还存在么
----------------------------------------------------------------------------------------------------------------------------------------------------------
以下是2016年的旧文
元素设置为display:none,虽然该元素从页面中消失了,其绑定的事件仍存在。
<body>
<button class="button1">change1</button>
<button class="button2">change2</button>
<button class="button3">change3</button>
<div class="test" style="width:50px;height:50px;background-color: red;"></div>
<script>
$(function () {
$('.button1').toggle(function() {
$('.test').css('background-color', 'black');
},function () {
$('.test').css('background-color', 'red');
});
$('.button2').click(function() {
$('.test').hide();
});
$('.button3').click(function() {
$('.test').show();
});
})
</script>
</body>
上图是初始页面。change1可以使div在红色和黑色切换,当点击change2时,div消失,然后点击change1,那这次点击能否是消失的div颜色变化呢?揭晓答案,最后,我们点击change3使div出现,发现消失的div颜色变了。所以结论是,元素设置为display:none,其绑定的事件仍存在。
元素设置为display:none,其绑定的事件仍存在的更多相关文章
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- 小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap
小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap
- IE6、7下块级元素设置display:inline-block不换行的解决办法
使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和 ...
- 解决设置了display:none的元素,会先展示再隐藏
问题:元素明明设置了display:none,但是在刷新页面的时候却会先显示了出来,然后才会隐藏,实现display:none 原因:由于元素渲染的时候,样式还没有应用上去,导致的 解决办法:使用内联 ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 若块级元素被设置为 display: table-cell 便无法设置宽度
工作中,遇到表格的单元格中的 div 设置宽度无效,后来是发现 div 被设置为 display: table-cell ,后将其修改为 display: block 则设置的宽度生效.
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
随机推荐
- 按Enter键触发事件
1.document.onkeydown=function(e){ var keycode=document.all?event.keyCode:e.which; if(k ...
- Dancing Links & Algorithm X
1 参考链接 http://www.cnblogs.com/steady/archive/2011/03/15/1984791.html#undefined http://en.wikipedia.o ...
- Win7 64位 MinGW环境测试SDL2.0.3
下载MinGW版的文件 http://www.libsdl.org/release/SDL2-devel-2.0.3-mingw.tar.gz 解压放到mysys下面 运行Makefile mysys ...
- mysql 5.7开启并行复制
开启多线程复制,默认关键的参数有两个: mysql> show variables like 'slave_parallel_%'; +------------------------+---- ...
- linux系统启动时更改MAC地址
vim /etc/rc.local #change the server's MAC address("00:50:56:84:5C:76" change to 00:50:56: ...
- Shmget 参数 0600的解释
Shmget 参数 0600的解释 0660 百位6 -- 本用户有读写权. 十位6 -- 同组用户有读写权,个位0 -- 其它用户无读写执行权.与chmod 设法一样.
- 个人博客作业week2——代码复审
1.代码规范 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 代码规范并不是从官僚制度下产生,它是为了提高项目团队开发效率而产生的一种工具,能够极大的增强代码可读 ...
- uva 11806 Cheerleaders
// uva 11806 Cheerleaders // // 题目大意: // // 给你n * m的矩形格子,要求放k个相同的石子,使得矩形的第一行 // 第一列,最后一行,最后一列都必须有石子. ...
- MSP430单片机的位操作
MSP430单片机属于RISC(Reduced Instruction Set Computer)型处理器.与普通的51单片机的复杂指令集相区别.普通51单片机执行一条指令最少需要12个时钟周期,而R ...
- hdu 5720
考虑三个树枝:a,b,c若c是将要抛出的树枝,那么形成三角形的条件是a+b>c and a-b<c 可以写成 c属于开区间(a-b,a+b)对于每个C和许许多多的其他边,如何保证C不构成三 ...