如何处理 jQuery 中动态创建的元素中的事件？

当我们想将任何事件绑定到一个元素时，通常我们可以使用on()方法直接绑定到每个元素的任何事件。

示例 1：此示例使用 jQuery on() 方法动态添加段落元素。

  

    
        How to handle events in dynamically 
        created elements in jQuery?
    
  
    
    
  
    
        $(document).ready(function () {
            $("#list li").on("click", function (event) {
                $('#list').append('<li>New Paragraph</li>');
            });
        }); 
    
  
    
        li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: green;
        }
    

  

    
    
        Click here to append !!!
    

  

输出：

这非常有效，但是当我们添加一个新的列表项并单击它时，什么也没有发生。这是因为之前附加的事件处理程序在加载文档时执行。当时只有第一个列表项存在，而不是新的。因此.on()方法仅应用于第一个列表项，而不应用于其余项。

示例 2：以下示例是使用on()方法实现的。

  

    
        How to handle events in dynamically 
        created elements in jQuery?
    
  
    
    
  
    
        $(document).ready(function () {
            $("#list").on("click", 
                    "li", function (event) {
                $('#list').append(
                    '<li>New Paragraph</li>');
            });
        }); 
    
      
    
        li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: green;
        }
    

  

    
  
        
        Click here to check on()!!!
    

  

输出：

示例 3：以下示例是使用delegate()函数的。要将事件处理程序绑定到动态创建的元素，我们将使用事件委托。单击新列表项时，将执行相同的操作。

事件委托是允许我们将单个事件侦听器附加到父元素的过程，它将为现在存在或将来添加的所有子元素触发。 on()和delegate()函数都允许我们进行事件委托。

  

    
        How to handle events in dynamically
        created elements in jQuery?
    
  
    
    
  
    
        $(document).ready(function () {
            $("#list").delegate("li", 
                "click", function (event) {
  
                $('#list').append(
                    '<li>New Paragraph</li>');
            });
        }); 
    
  
    
        li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: green;
        }
    

  

    
  
        
        Click to check delegate !!!
    

  

输出：