美文网首页
为动态生成的元素添加事件监听

为动态生成的元素添加事件监听

作者: Michael_lpf | 来源:发表于2016-12-30 11:28 被阅读0次

当我们有一个列表:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

希望为每个<li></li>添加点击事件监听,我们一般这样做:

$('li').click(function(){
  // do something...
});

但是,如果我们的列表不是在页面加载时由浏览器渲染的DOM,而是动态生成的呢,上面的事件监听就会失效了。
那么如何为页面中动态生成的元素添加事件监听呢?很简单:

$('ul').on('click', 'li',  function(){
  // do something...
});

这其实就是我们常说的“事件委托”。
在类似body>div>span这样的DOM结构中,单击<span>,click事件会一直冒泡到<div><body>,因此发生在<a>上的事件,<div><body>一样会受理。而利用事件传播(这里是事件冒泡,相对应的还有事件捕获)机制,就可以实现事件委托。

总结来说,事件委托就是事件目标自身不处理事件,而是把事件处理任务委托给父元素或祖先元素。

[完]

相关文章

  • 为动态生成的元素添加事件监听

    当我们有一个列表: 希望为每个 添加点击事件监听,我们一般这样做: 但是,如果我们的列表不是在页面加载时由浏览器...

  • HostListener & HostBinding

    HostListener 是属性装饰器,用来为宿主元素添加事件监听。HostBinding 是属性装饰器,用来动态...

  • 事件委托on()里面阻止事件冒泡

    1.为动态添加的元素添加事件时,直接给元素添加事件,由于找不到动态添加的元素而报错; 解决:使用事件委托的方式,给...

  • 事件委托

    为什么用事件委托?可以监听还没有出生的儿子(动态生成的元素)。省监听器。

  • JQuery 为动态生成的元素添加事件

    在编写JS的时候,在给某个div增加新的DOM内容的时候,想为添加的DOM元素设置click方法,但是发现clic...

  • js为动态生成/添加的元素绑定事件

    有一段时间没有写js代码了,今天就说说js为动态生成/添加的元素绑定事件。 原理: 定位到需要绑定的元素(重点)-...

  • Angular 4 HostListener & Hos

    HostListener 是属性装饰器,用来为宿主元素添加事件监听。 此外,我们也可以监听宿主元素外,其它对象产生...

  • 事件处理

    1.事件代理 事件代理:为子元素添加监听器转变为为父容器添加监听器,然后通过event.target判断具体操作的...

  • 如何动态监听js动态添加的标签

    如何动态监听js动态添加的标签 问题$(function(){ //正常的监听事件 $(".input-s...

  • Js监听动态添加元素事件

    body为页面加载前已有的元素edit_img为动态添加的元素该方法建议写在$().ready中

网友评论

      本文标题:为动态生成的元素添加事件监听

      本文链接:https://www.haomeiwen.com/subject/lukmvttx.html