该文章在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. 关于Spring和mybatis的整合

    Spring同Mybatis的整合 1.引入相应的jar包.(Mybatis的jar包,Spring的jar包,mybatis-spring-1.1.1.jar). 2.编写相应的包(三层的包).搭建 ...

  2. jQuery .css color 重写 :hover样式没了

    $("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...

  3. SRETAN

    SRETAN (sretan.pas/c/cpp) 题目描述 4和7是幸运数字,输入k,输出第k个只含有4和7的数. 输入格式 一行一个数k 输出格式 一行一个数表示答案 样例输入 3 样例输出 44 ...

  4. python3中返回字典的键

    我在看<父与子的编程之旅>的时候,有段代码是随机画100个矩形,矩形的大小,线条的粗细,颜色都是随机的,代码如下, import pygame,sys,random from pygame ...

  5. 机器学习利器——Scikit-learn的安装

    由于笔者最近在进行毕业论文的准备,且毕业论文中需要用到Python版本的机器学习库——scikit-learn.所以最近三天一直在Windows上部署这个框架,终于部署成功了... 首先打开加州大学底 ...

  6. Java学习笔记 02 String类、StringBuilder类、字符串格式化和正则表达式

    一.String类一般字符串 声明字符串 >>String str 创建字符串 >>String(char a[])方法用于将一个字符数组创建为String对象 >> ...

  7. Asp.Net 利用反射获得委托和事件以及创建委托实例和添加事件处理程序

    子程序定义: public delegate void CurrentControlListenEvent(string uniqueID, string way = null); public ev ...

  8. 设置代码Code高亮显示成蓝色

    下面方法是让设置的关键字高亮显示,考虑到了注释与字符串的影响,所以备用,以便将来能够用到. private static void ColorizeCode(RichTextBox rtb) { st ...

  9. Bootstrap 栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...

  10. 03、AngularJs的模块与控制器

    大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进 ...