jQuery's method of binding events to dynamically added elements

  • 2020-05-12 02:09:33
  • OfStack

This article illustrates how jQuery binds events to dynamically added elements. Share with you for your reference. The specific analysis is as follows:

The binding event 1 in jquery USES bind, or click, but this only defines events for elements that have already been loaded, and those that have been added and inserted later need to be bound separately. Use live before version 1.7. However, on is recommended after version 1.8. Here's how to bind events to dynamically added elements in jQuery
In actual development, you will encounter situations where you want to trigger events for dynamically generated bindings to html elements

For example,


<div id="testdiv">
  <ul></ul>
</div>

Need to give < ul > It's dynamically added inside < li > Tag adds the click event

Before version 1.7, jquery used live to dynamically bind events


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

jquery USES on to dynamically bind events after version 1.7


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

I hope this article has been helpful to your jQuery programming.


Related articles: