SoFunction
Updated on 2025-03-09

jQuery method to bind events to dynamically added elements

This article example describes the method of jQuery to dynamically add element binding events. Share it for your reference. The specific analysis is as follows:

Binding events in jquery generally use bind or click, but this can only define events for elements that have been loaded, and those elements that are later added and inserted need to be bound separately. Use live before version 1.7. However, it is recommended to use on after version 1.8. Here is how to add dynamic element binding events in jQuery
In actual development, you will encounter a situation where you want to bind a trigger event to dynamically generated html elements.

For example

<div >
  <ul></ul>
</div>

You need to add a click event to the <li> tag dynamically added in <ul>
 
jquery version 1.7 used live dynamic binding events

$("#testdiv ul li").live("click",function(){
});

Use on dynamic binding events after jquery version 1.7

$("#testdiv ul").on("click","li", function() {
     //do something here
 });

I hope this article will be helpful to everyone's jQuery programming.