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

jQuery 提供了各种事件处理程序，如on() 、 live()和bind() 。但是，下面将讨论一些细微的差异。

bind() 方法：此方法仅将事件附加到预先存在的元素，即附加事件之前已初始化文档的状态。如果之后某个事件的选择器条件满足，则 bind() 将不会对该函数。如果从元素中删除选择器条件，它也不会起作用。

• 例子：

      
      
      
  
  
      
          This is Statement 1.
          
              /* Here, the bind() works on elements 
                 initialized beforehand only */
              $(".a").bind("click",function(){
                  $(this).css("color","red"); 
              });
          
          This is Statement 2.
          
      
  
                              

• 输出：
  在点击这些声明之前：
  
  单击这些语句后：
  

live() 方法：此方法不仅将事件附加到现有元素，还附加到将来附加的元素，但如果从元素中删除选择器条件，则该方法将不起作用。

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

• 例子：

      
      
      
      
  
      
          This is Statement 1.
          
              /* live() method works for elements 
                 appended later as well */
              $(".a").live("click",function(){
                  $(this).css("color","red"); 
              });
          
          This is Statement 2.
          
      
  
                      

• 输出：
  在点击这些声明之前：
  
  单击这些语句后：
  

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

• 例子：

      
      
      
  
  
      
          This is Statement 1.
          
              /* Works on all elements within scope 
                 of the document */
              $(document).on("click",".a",function(){
                  $(this).css("color","red"); 
              });
          
          This is Statement 2.
          
      
  
                                              

• 输出：
  在点击这些声明之前：
  
  单击这些语句后：
  

上述方法的差异总结：

Property	bind()	live()	on()
Deprecated	Yes	Yes	No
Removed	No	Yes	No
Scope	Elements initialized beforehand	For both current and future event binding	For both current and future event binding
Syntax:	$([selector]).bind([event],[function]);	$([selector]).live([event],[function]);	$(document).bind([event],[selector],[function]);