Jquery中bind绑定和on绑定的区别

时间 2019-11-21

标签 jquery bind 绑定区别栏目 JQuery 繁體版

原文原文链接

定义：从jquery1.7后推荐使用on绑定事件，on()是bind(), live(), delegate()方法的替代品。javascript

注意：值得注意的是：on不单单做用于当前绑定的元素，对于将来有脚本语言建立的元素也会有一样的做用。css

移除：若是要移除on()事件，请是用off();html

使用场景：在个人项目中有这样的一种状况，须要动态的添加列表的元素。我在添加元素的时候每次都要为添加的元素bind相应的click等方法。这很让人烦恼，有没有执行一次就能够自动为我没次添加的元素绑定相应的事件呢？java

只要你是用的是jquery1.7+版本这时候变能够替换成bind方法为on方法。在容器初始化的时候使用on方法为容器中的元素绑定事件便可。node

例子--使用bind/on绑定事件：jquery

有一个值得注意的地方是，在使用on绑定事件的时候应该委托其父元素，查找子元素进行绑定。直接在子元素上绑定方法，没法实现实时绑定的效果。app

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 使用bind为页面初始化时为ul中li元素绑定hover事件
            //*
            $("ul li").bind('click', function(){
                $(this).css({'background': 'green'});
                // 新添加的此元素不具有点击的能力
                $(this).parent().append("<li>I don't  know how call me comeing. If you click my body , i cant do anything.</li>");
            });
            //*/
            /*
            // 使用on为页面初始化时为ul中li元素绑定hover事件
            $("ul").on('click', 'li', function(){
                $(this).css({'background': 'green'});
                // 新添加的此元素具有点击的能力
                $(this).after("<li>I don't  know how call me comeing. If you click my body , i cant anything</li>");
            });
            */
        });
    </script>
  </head>
  <body>
        <ul>
            <li>I'm first node. If you click my body , I well change my body to green and pull a new node in below.</li>
        <ul>
  </body>
</html>

总结：this

我并未作深刻的研究，好比bind方法怎么实现的，bing，on之间的优劣对比。我倒是找到了一个别人的帖子讲的比较仔细，但愿有时间我也能够仔仔细细的研究研究。可是今天，先到这里，将链接奉献，以供参考。spa

http://www.jb51.net/article/67166.htm.net