该文章在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，其绑定的事件仍存在的更多相关文章

  1. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  2. 小程序scroll-view组件使用时，子元素虽设置样式display:inline-flex;whit-space:nowrap

    小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

  3. IE6、7下块级元素设置display:inline-block不换行的解决办法

    使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和 ...

  4. 解决设置了display:none的元素，会先展示再隐藏

    问题:元素明明设置了display:none,但是在刷新页面的时候却会先显示了出来,然后才会隐藏,实现display:none 原因:由于元素渲染的时候,样式还没有应用上去,导致的 解决办法:使用内联 ...

  5. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  6. 若块级元素被设置为 display: table-cell 便无法设置宽度

    工作中,遇到表格的单元格中的 div 设置宽度无效,后来是发现 div 被设置为 display: table-cell ,后将其修改为 display: block 则设置的宽度生效.

  7. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  8. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  9. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

随机推荐

  1. mybatis中表与表之间的关联

    第三天 1.mybatis处理表与表之间的关系? 比如要在帖子回复表里显示其它两张相关联表的信息. 处理的第一种方式: 1)主要的数据实体类是ReplyInfo,相关联的实体表的数据是TitleInf ...

  2. 一台MySQL服务器启动多个端口

    一台MySQL服务器启动多个端口 在测试Mysql多主一从服务器,即一个从服务器多端口同步不同主库.本文记录了开启不同端口的操作. 详细步骤: 1.首先要先把my.cnf配置文件复制一份,开几个端口要 ...

  3. ARCgis已知线裁剪已知面

    经常遇到需要在ArcGIS中,根据已知线图层(要素)切分已知面图层(要素).经过研究,利用topology拓扑菜单中的construct features可以实现.具体如下 现有用线图层A.面图层B, ...

  4. Refresh recovery area usage data after manually deleting files under recovery area

    Original source: http://www.dba-oracle.com/t_v$_flash_recovery_area.htm If you manually delete files ...

  5. C++函数返回局部指针变量

    遇到过好几次关于函数返回指针变量问题,有时候是可以的,有时候是不可以的,然后就混乱了.今天研究了下,结果发现原来和内存分配有关. 用下面的例子分析下吧: char * test() { char a[ ...

  6. java-代理模式及动态代理

    代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在考虑到性能或安全等因素的情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. ...

  7. [转] MySQL 查询表数据大小的总结

    一:关于mysql表数据大小 我们知道mysql存储数据文件一般使用表空间存储 当mysql使用innodb存储引擎的时候,mysql使用表存储数据分为共享表空间和独享表空间两种方式 ·共享表空间:I ...

  8. 【C-循环结构】

    C语言提供了多种循环语句,可以组成各种不同形式的循环结构: 用goto语句和if语句构成循环: 用while语句: 用do-while语句: 用for语句: 一.goto语句 goto语句是一种无条件 ...

  9. ajax500错误

    昨天做一个需求,原先使用form提交的东西,领导说要改成使用ajax提交.嗯,听起来好像很简单很简单哦,可惜我已经很少敲代码了.擦,这工作让人槽点无数.果断写代码. var fm=document.g ...

  10. Linux（centeros）下安装jdk

    首先需要说明的是有的Linux系统自带jdk,这个jdk是openjdk,可以通过java-version查看 所以安装的步骤是,首先删除系统自带的(如果有)openjdk 1. rpm -qa | ...