Javascript

JS动态绑定事件碰到的坑

本文主要是介绍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动态绑定事件碰到的坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航