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动态绑定事件碰到的坑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程