jQuery中on()和live()或bind()的区别

jQuery提供各种事件处理程序，如on()，live()和bind()。虽然，有一些小的差异，下面将讨论。

bind()方法：该方法只对事先存在的元素附加事件，即在附加事件前初始化文档的状态。如果选择器条件在事后被满足，bind()将不会对该函数起作用。如果选择器条件被从元素中移除，它也不会工作。

示例:

<!DOCTYPE html>
<html>
<head>
    <!-- CDN for jQuery -->
    <script src=
"https://code.jquery.com/jquery-3.4.1.js">
    </script>
</head>
<body>
    <div class="content">
        <p class="a">This is Statement 1.</p>
        <script>
            /* Here, the bind() works on elements 
               initialized beforehand only */
             $(".a").bind("click",function(){$ (this).css("color","red"); 
            });
        </script>
        <p class="a">This is Statement 2.</p>
        <!-- click() method works on Statement 
               1 but not on Statement 2. -->
    </div>
</body>
</html>

输出:
在点击这些声明之前：

点击这些声明后：

live()方法：该方法不仅为现有的元素附加事件，也为将来附加的元素附加事件，但在选择器条件从元素中删除的情况下，它不会工作。

注意： live()方法在jQuery 1.7版本中被废弃，并在1.9版本中被删除。

示例:

<!DOCTYPE html>
<html>
<head>
    <!-- Old CDN for .live() to work in jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
    </script>
    </head>
<body>
    <div class="content">
        <p class="a">This is Statement 1.</p>
        <script>
            /* live() method works for elements 
               appended later as well */
             $(".a").live("click",function(){$ (this).css("color","red"); 
            });
        </script>
        <p class="a">This is Statement 2.</p>
        <!-- live() method works on both Statement 
             1 and Statement 2. -->
    </div>
</body>
</html>

输出:

在点击这些声明之前：
jQuery中on()和live()或bind()的区别
点击这些声明后：

on()方法：该方法不仅为现有的元素附加事件，也为将来附加的元素附加事件。这里on()和live()函数的区别在于，on()方法仍然被支持，并且使用了不同的语法模式，与上述两种方法不同。

示例:

<!DOCTYPE html>
<html>
<head>
    <!-- CDN for jQuery -->
    <script src=
"https://code.jquery.com/jquery-3.4.1.js">
    </script>
</head>
<body>
    <div class="content">
        <p class="a">This is Statement 1.</p>
        <script>
            /* Works on all elements within scope 
               of the document */
             $(document).on("click",".a",function(){$ (this).css("color","red"); 
            });
        </script>
        <p class="a">This is Statement 2.</p>
        <!-- on() method works on both Statement
             1 and Statement 2. -->
    </div>
</body>
</html>

输出:
在点击这些声明之前：
jQuery中on()和live()或bind()的区别
点击这些声明后：

上述方法的差异总结：

属性	bind()	live()	on()
废弃的	是的	是的	不是的
已删除	否	是	否
范围	事先初始化的元素	对于当前和未来的事件绑定	对于当前和未来的事件绑定
语法。	`$([selector]).bind([event],[function]);`	`$([selector]).live([event],[function]);`	`$(document).on([event], [selector], [function])`