JS动态绑定事件碰到的坑
2021/4/24 10:25:16
本文主要是介绍JS动态绑定事件碰到的坑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
bind
.bind()是直接绑定在元素,只对页面刚加载的标签有效,对于js动态生成的标签并没有效果
on
on()可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的子元素加上绑定事件。
注意:坑就在这里。
所以on必须是以给父级添加事件。
比如要给下面所有的li添加事件,还要保证未来要动态生成的li也有效果:
<ul> <li>第一个子元素<li/> <li>第二个子元素<li/> <li>第三个子元素<li/> </ul> 必须是写: $('ul').on('click','li', function () { console.log($(this).text()); }); 如果写下面这样是不会给未来生成的元素绑定事件的: $('li').on('click', function () { console.log($(this).text()); });
live
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。也就是说不管怎么写都能给未来的动态生成的元素也绑定上事件(很强)。
这篇关于JS动态绑定事件碰到的坑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vue CLI多环境配置学习:从入门到实践
- 2024-11-24Vue CLI多环境配置学习:新手入门教程
- 2024-11-24Vue CLI学习:初学者指南
- 2024-11-24Vue CLI学习:从入门到上手的简单教程
- 2024-11-24Vue3+Vite学习:从零开始的前端开发之旅
- 2024-11-24Vue3阿里系UI组件学习入门教程
- 2024-11-24Vue3的阿里系UI组件学习入门指南
- 2024-11-24Vue3公共组件学习:新手入门教程
- 2024-11-24Vue3公共组件学习入门指南
- 2024-11-24vue3核心功能响应式变量学习