以下利用jquery说明：

　　　　js中，给一个dom节点绑定事件再平常不过了。这里说下，如果dom经常发生变化的话，给这个dom绑定事件的情况。

比如代码如下：

li的节点，绑定了事件：点击会打出来里头的html内容。

button点击事件：会生成一个li节点。

 <html>

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <ul class="ul">

     <li class="li">abc</li>

     <li class="li">abc</li>

     <li class="li">abc</li>

 </ul>

 <hr/>

 <button id="btn">add</button>

 </body>

 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">

     $(function(){

         $('.li').click(function(){

             console.log(this.innerHTML);

         });

         $('#btn').on('click', function(){

             $('.ul').append('<li class="li">XXX</li>');

         });

     });

 </script>

 </html>

如果这么写的话，点击以后生成的li节点，点击是不会打出log的~

因为代码执行来看，未点击add时，我们给每一个li绑定了click事件，这仅限于当前dom树下的li。$('.li')仅是获取当前dom下的所有class为li的节点。

当点击button后，再生成的节点，是绑定不上的。

咋办咧？此时，我们会利用事件的冒泡或者捕获的机制，对li的父节点ul打主意~如果给ul绑定一个click事件，那么即便是点击新生成的它的子节点，不也有了事件么？哈哈~就是这样

代码如下：

$('.ul').on('click', '.li', function(){

     console.log(this.innerHTML);

});

我们给.ul绑定了事件，在其中选择.li选择器，这样就解决了~

随笔一个dom节点绑定事件的更多相关文章

  1. 一个DOM元素绑定多个事件时，先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  2. 如果dom节点是动态添加进页面的，在页面节点绑定事件如何解决的问题。

    如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...

  3. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  4. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

  5. Chrome插件Visual Event查看Dom元素绑定事件的利器

    找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...

  6. 用live()方法给新增节点绑定事件

    jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效. 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件 ...

  7. JQ动态生成节点绑定事件无效问题

    最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态 ...

  8. AngularJS如何给动态添加的DOM中绑定事件

    正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿 ...

  9. 第一话：IE中用DOM方法绑定事件

    工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值.下面进入主题: IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重 ...

随机推荐

  1. Python中应用虚拟环境

    安装pip sudo apt-get install python3-dev sudo apt install python3-pip 安装virtualenv工具 sudo apt-get inst ...

  2. 《ASP.NET MVC企业实战》(三)MVC开发前奏

    ​ 在上一篇“<ASP.NET MVC企业级实战>(二)MVC开发前奏”中跟随作者大概了解了一些C#3.0和3.5中的新特性.本篇继续以这样的方式来学习C#中的一些特性.   一.C#3. ...

  3. Kotlin入门(6)条件分支的实现

    上一篇文章介绍了字符串的相关操作,其中示例代码用到了if和for语句,表面上看,Kotlin对控制语句的处理与Java很像,可实际上,Kotlin在这方面做了不少的改进,所以本篇和下一篇文章就分别介绍 ...

  4. 【redis专题(3)】命令语法介绍之link

    通过链表结构可以模仿队列结构与堆栈结构:关于队列结构和堆栈结构可以查看https://www.zybuluo.com/a5635268/note/290475 增 lpush key value1 v ...

  5. Sql_server基本操作

    使用Sql_server创建表,视图,触发器,存储过程,函数等基本操作. create table test1( /* 创建一个表 */ num int ) alter table test1 /* ...

  6. .net core HttpContext（Http上下文）

    在.NET Core中,只有Controller才能直接使用 HttpContext ,其他地方需要通过HttpContextAccessor来访问

  7. [MapReduce_add_3] MapReduce 通过分区解决数据倾斜

    0. 说明 数据倾斜及解决方法的介绍与代码实现 1. 介绍 [1.1 数据倾斜的含义] 大量数据发送到同一个节点进行处理,造成此节点繁忙甚至瘫痪,而其他节点资源空闲 [1.2 解决数据倾斜的方式] 重 ...

  8. .net core 入坑经验 - 3、MVC Core之jQuery不能使用了？

    在View中添加了一段jQuery代码用来控制一个按钮的点击事件.发现运行时提示$对象没有定义,经过在浏览器右键查看源文件发现,script代码在引用jquery代码的上方,执行时jquery还未引入 ...

  9. January 02nd, 2018 Week 01st Tuesday

    I dream my painting, and then I paint my dream. 我梦见我的画,然后我画我的梦. It was a long time after I had a goo ...

  10. 【Beta Scrum】冲刺！ 3/5

    1. 今日完成情况 人员 学号 分工 是否完成 完成情况 胡武成 031502610 完成登录注册api,协助web端完成api N SDN课程实践加上课缘故,仅仅写完了登录注册的逻辑判断内容,但是短 ...