jQuery中on与bind的区别

xiaoxiao2021-02-28  101

具体用法: .bind(events [,eventData], handler) .on(events [,selector] [,data], handler)

示例:

<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> $(function () { $('ul li').on('click',function(){ alert($(this).text()) }); }) </script>

此时on或bind都一样;

<script> // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力 $(function () { $('ul li').bind('click',function(){ alert($(this).text()) }); var ok = $('<li>4</li>'); $('ul').last().append(ok); }) </script>

此时动态添加的新li元素并没有绑定事件,修改后:

<script> // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件 $(function () { $('ul').on('click','li',function(){ alert($(this).text()) }); var ok = $('<li>4</li>'); $('ul').last().append(ok); }) </script>

总结: 子元素过多,并且可能会动态添加html元素时,尽量使用on方法。

转载请注明原文地址: https://www.6miu.com/read-23819.html

最新回复(0)