用 jQuery 中的 on() 替换 live()

以下 jQuery 事件处理函数基本上用于将事件附加到元素或选择器，但彼此之间有很大不同。在将 jQuery live()变成on()函数，让我们先了解一下事件处理程序以及它们的区别。

jQuery live() ：
这个 jQuery函数为所有与当前元素中的给定选择器相匹配的元素附加了一个函数处理程序，以及在将来或每当某些内容动态添加到页面时。此函数将函数处理程序与给定的选择器和数据一起附加到根文档。它是在 jQuery 1.3 及更高版本中引入的。
在 jQuery-version 1.4 之后，它提供了对所有事件的支持。
早些时候，它只支持一些事件，如单击、双击、鼠标按下、鼠标抬起、鼠标悬停、鼠标移开、键盘按下、键盘按下、按键按下。

句法：

$( selector ).live( events, data, function handler); 

• events ：一个或多个由空格分隔的事件，附加到选择器。
• data ：传递给函数处理程序的可选数据参数。
• 函数处理程序：事件发生时执行的函数。

注意：它使用了事件委托和事件冒泡的概念。

代码片段：

$( "#container a" ).live( "click", function() {
 // some response code to the event
  alert( "GeeksforGeeks" ); 
});

函数处理程序与选择器和单击事件一起绑定到文档的根。
当用户点击锚元素时，事件被触发到文档根部并与#container a匹配，然后执行点击事件函数。
在动态网站中使用 jQuery live() ，程序员无需担心更新事件处理程序。
它适用于现有和未来的元素。

代码片段：

$('a').live('click', function() { 
 alert("GeeksforGeeks") 
});

警报函数与单击事件和a作为参数一起附加到文档。
每当任何事件冒泡到根文档时，jQuery 都会检查click事件并检查 CSS 选择器a 。
如果这两个条件都满足，则处理程序中的代码将有效执行，从而使函数变得非常不灵活。

$( "a" ).live( "click", function( event ) {
 // It cancels the default action by this method.
  event.preventDefault();
});

示例 1：
在以下示例中，使用此方法将“click”事件附加到给定的“p”。

   

    
    
    
        $(document).ready(function() {
            $("button").live("click", function() {
                $("p").slideToggle();
            });
        });
         $('body').append(
'
<p>Adding dynamic items to test live function</p>
');
    

 

   
     
Geeks for Geeks
  
   
    Press
    
    
   
    Clicking on the 'Press' 
      button will execute the live method().
       

   

输出：

点击“按下”按钮后，显示如下：
输出：

示例 2：
在下面的示例中，使用此方法将“click”事件附加到给定的“p”和另一个按钮。

      
  
    
    
    
        $(document).ready(function() {
             
            $("#pressbutton").live("click", function() {
                $("p").slideToggle();
            });
            $("#insertbutton").click(function() {
                $("
<p>Inserted Element</p>
").insertAfter(
                  "#insertbutton");
            });
        });
    
    
    
     
Geeks for Geeks
  
   
    Press to toggle
    
    
      
    Click to insert an element
   

   

输出 ：

示例 3：
在下面的示例中，使用此方法将“click”事件附加到类“div”。

jQuery live() method

   
    
   $(document).ready(function() {
 
     $('div').live('click', function( event ){
         alert('GeeksforGeeks');
     });
 
   });
 
   
   
      .div{
        width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
            border: 2px solid black;       
      }
  


   GeeksforGeeks
    
Click on any square to see the output:
 
   
   
   

输出：

注意：这个函数在 jQuery 1.7 中被弃用，最终在 jQuery 1.9 中删除了它的一些漏洞。该函数被重写，通常称为 jQuery on() ，它是实现的首选。

使用 jQuery live() 的缺点：
让我们看看 jQuery .live()函数的一些缺点，因为它已被弃用和删除。

1. 由于事件触发器被委派到文档的根目录，因此使用event.stopPropagation()
   没有任何意义。
2. 在执行函数处理程序之前，函数必须一直遍历到根
   文档。
3. 因此，在大型DOM和时间的情况下，性能和灵活性会受到影响
   消耗。
4. 使用 jQuery live()不支持链接。

   jQuery .on() ：
   这个 jQuery函数附加了一个或多个与当前选择器以及所有子元素匹配的函数处理程序。当前选择器必须在代码调用 jQuery on() 时存在于页面上。这个函数是在 jQuery 1.7 及更高版本中引入的，为了简化和合并所有以前的事件处理程序，即 live()、bind()、delegate() 为一个一致的函数。

   句法 ：

   $(selector).on(events, childSelector, data, function handler);
   

   或者

   $( document ).on( events, selector, data, function handler ); 
   

   • events : 一个或多个由空格分隔的事件。
   • selector ：触发事件的选择器或子选择器。
   • data : 要传递给函数处理程序的数据。
   • 函数处理程序：在该事件触发器上执行的函数。

   代码片段：

   $('#parentId').on('click', '#childId', function() {
       // Code to be written
   });
   

   注意：每次在所选元素上发生事件时都会调用函数处理程序。
   事件可以发生在来自内部子元素的元素上。

   使用 jQuery on() 的优点：

   让我们看看 jQuery .on 的一些优点，因为它在 jQuery live()之上使用

   1. jQuery .on()函数是所有事件绑定函数的实际替代品，如 live()、bind() 和
      delegate() 为代码提供了很多简单性和一致性。
   2. jQuery.on()函数可以将事件处理程序附加到更接近实际对象的父对象
      从而有效地提高性能。
   3. 此函数适用于当前和未来的元素。
   4. 即使对于简单的静态元素，使用 jQuery on() 也是一个好习惯。
   5. 事件处理程序从最里面到最外面的元素执行。

   代码片段：

   
   
   
   

   $("#container a").on("click", function () {
   // some response code to the event
     alert("GeeksforGeeks.");
    });
   

   $(document).on('click', '.selector', function() {
     /* some response code to the event */ 
     alert("GeeksforGeeks");
   });
   

   $("#dataTable tbody").on("click", "tr", function(event){
     alert("GeeksforGeeks");
   })
   

   在上面的例子中，jQuery 将“click”事件绑定到dataTable的tbody 。
   如果子元素被点击，由于事件向上冒泡，事件会到达tbody 。

   事件处理程序的代码片段：

   function print_message() {
     alert( "GeeksforGeeks" );
   }
   $( "button" ).on( "click", print_message );
   

   注意：简而言之，jQuery on()代表了一种将事件处理程序附加到元素的简化方式。
   示例 1：
   此示例显示，使用 on() 方法将“click”事件附加到“div”方块。

    
      
         jQuery on() method
         
           
         
            $(document).ready(function() {
               $('div').on('click', function( event ){
                  alert('GeeksforGeeks!');
               });
            });
         
           
         
            .div {
               width: 50px;
               height: 50px;
               margin: 10px;
               float: left;
               border: 2px solid black;
            }
         
      
       
      
         GeeksforGeeks
          
   Click on any square to see the output:
    
           
         
         
         
           
      

   输出 ：
   

   示例 2：
   此示例显示，使用 on() 方法将“click”事件附加到“li”。

     
     on demo
     
     li {
       width:200px;
       background: yellow;
       cursor: pointer;
       padding: 5px;
     }
     li.hover {
       background: #ccc;
     }
     
     
     
   
   
     GeeksforGeeks
     
   Click me!
   
   
     
   
   var count = 0;
    
   $( "body" ).on( "click", "li", function() {
     $( this ).after( "<li>Paragraph number : " + (++count) + "</li>" );
   });
   
     

   输出：
   

   弃用 jQuery live() 的原因：

   1. 在整个文档对象上应用所有 .live() 事件处理程序是一种糟糕的编程习惯。
   2. 在非常大的文档上，它的性能和内存利用率都很差，而且响应时间很慢。
   3. 当事件处理程序附加到文档元素时，它会抛出意想不到的结果，从而降低了效率。

   将 live() 转换为 on()：
   将live()转换为 on() 需要事件委托。
   jQuery on()性能更好，因为它将事件处理程序直接绑定到元素而不是文档根。
   jQuery 将事件处理程序附加到最近的祖先元素，然后允许它从子元素冒泡。最初，jQuery live() 用于将函数处理程序附加到当前不在文档中并且可以动态生成的元素。
   部分代表团如下：

   $('#container a').live('click', function(e) {
     e.preventDefault();
     alert('Anchor element is  clicked');
   });
    

   将live()转为on() 后，代码如下：

   $('#container').on('click', 'a', function(e) {
      e.preventDefault();
      alert('Anchor element is  clicked');
    });
    

   $('button').live('click', execute);
    function execute() {
       // code for execution
    }
    

   将live()变成on() 后，上面的代码写成如下：

   $(document).on('click', 'button', execute);
     function execute() {
       // code for execution
     }
    

   在上面的示例中，对文档调用了 jQuery on()。
   但是如果选择更接近选择器的元素而不是文档，则性能会更好。

   $( "#id" ).live( "click", function() {
      alert("GeeksforGeeks live event .");
    });
    

   将live()变成on() 后，上面的代码写成如下：

   $( "#id" ).on( "click", function() {
       alert("GeeksforGeeks on event.");
     });