美文网首页
如何动态为节点绑定事件?

如何动态为节点绑定事件?

作者: 趁你还年轻233 | 来源:发表于2016-09-08 13:04 被阅读0次

废话不错说,直接上代码。

点击删除按钮前 点击删除按钮后

此时我达到一个点击“确定”删除当前列表的功能,于是乎我写下了下面这样的代码:

然而并没有什么卵用!

仔细想本质上的问题是:

页面在加载js文件时,当前文档还没有对应的节点;而当我点击删除按钮的时候,文档新增了对应节点,而此时js文件已经加载完毕了,不会再去查找。

总而言之,问题是这样:如何在动态为节点绑定事件??

说直白一些就是,当我添加了新的dom元素进入页面,而他们位于js问文件之后,我该如何在添加完dom之后,再运行js代码(这样说略不严谨,不过有助于理解)

扯了半天,最后怎么实现的呢?

神奇的on事件

这样把事件委托在document上,就实现了为dom节点动态绑定事件!!!

努力成为优秀的前端工程师!

>期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

> - SegmentFault技术圈:[ES新规范语法糖](https://segmentfault.com/g/1570000010695363)

> - SegmentFault专栏:[趁你还年轻,做个优秀的前端工程师](https://segmentfault.com/blog/chennihainianqing)

>- 知乎专栏:[趁你还年轻,做个优秀的前端工程师](https://zhuanlan.zhihu.com/wyasy)

>- Github博客: [趁你还年轻233的个人博客](https://github.com/FrankKai/FrankKai.github.io)

>- 前端开发QQ群:660634678

>- 微信公众号: 人兽鬼 / excellent_developers

![](https://img.haomeiwen.com/i2976869/157e8624bcdfd62a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>努力成为优秀前端工程师!

相关文章

  • 如何动态为节点绑定事件?

    废话不错说,直接上代码。 此时我达到一个点击“确定”删除当前列表的功能,于是乎我写下了下面这样的代码: 然而并没有...

  • vue基础:属性动态绑定、事件动态绑定

    属性动态绑定 :[属性名字] 事件动态绑定 @[事件名字]

  • 动态为元素绑定事件

    对于在页面加载时就被加载的元素,我们可以直接使用下面代码来为元素绑定事件 但是对于页面动态新增的元素,是没有被绑定...

  • bind、live、delegate、one、on区别

    bind()实现事件绑定,但无法动态绑定事件。1.7版本以前比较受推崇 live()实现动态绑定事件,不支持连续调...

  • jQuery事件

    jquery事件 事件函数列表: 取消绑定事件: jquery元素节点操作 插入节点 删除节点 todolist(...

  • 绑定事件

    1、在节点中绑定tap事件 其中,tap为事件的类型, onTap为事件回调函数的名称;"bind:tap"也可写...

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

    想必大家都有遇到过,DOM动态添加的元素,你给它绑定的事件是不起作用的。目前有两种办法,为动态添加的元素绑定事件 ...

  • 小程序:列表项动态绑定事件

    2021-12-28 周二 固定绑定事件 动态绑定事件 data methods

  • jQuery事件

    2019-06-05 事件绑定 可以使用on方法进行事件动态绑定 示例:表格动态增删通过on方法附加的事件处理代码...

  • 数据绑定和dom回流

    数据绑定方法: 1、利用动态元素节点和把它追加到页面中的方式实现数据绑定: eg (ary为JSON数据): 优势...

网友评论

      本文标题:如何动态为节点绑定事件?

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