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-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist