📌  相关文章
📜  如何处理 jQuery 中动态创建的元素中的事件?

📅  最后修改于: 2021-11-25 03:47:45             🧑  作者: Mango

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

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



  

    
        How to handle events in dynamically 
        created elements in jQuery?
    
  
    
  
    
  
    

  

    
    
            
  • Click here to append !!!
  •     
  

输出:

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

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



  

    
        How to handle events in dynamically 
        created elements in jQuery?
    
  
    
  
    
      
    

  

    
                        
  • Click here to check on()!!!
  •     
  

输出:

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

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



  

    
        How to handle events in dynamically
        created elements in jQuery?
    
  
    
  
    
  
    

  

    
                        
  • Click to check delegate !!!
  •     
  

输出: