jquery Dynamic bound event handler Bind/on/delegate

1. The Bind method binds an event handler that is not applied to a new element that is later added to the DOM. For example, after you bind an event to a page element with BIND, a new DOM element is added with the same elements as the previously bound event, but these events are not reflected on the new DOM element.

Such as:

$ (document). Ready (function() {      $ ("img"). Bind ({          mouseenter:function () {                   $ (this). CSS ("border", "thick solid Red");           },           mouseout:function  () {                  $ (this). CSS ("border", "thick solid green");           }         );       $ ("#row"). Append (");      });

The newly inserted IMG does not have a binding event at this time.

2. The on method binds an event and does not directly bind the event handler to the target element. In fact, it is binding an event handler on the document object that checks to see if the element that triggered the event matches the selector when triggered. Once the event matches the element successfully, the bound event handler is called. In fact, the on method is an effort to bind the event handler function to the new element.

$ (document). Ready (function() {      $ (document). On ({          mouseenter:function() {                   $ (this). CSS ("border", "thick solid Red")           ,           mouseout:function  () {                  $ (this). CSS ("border", "thick solid green");         }, "img"
$ ("#row"). Append ("
});

However, there may be a problem with the on method binding event handler, which we need to propagate to the document element before the processing function executes, and delegate more directly and efficiently than the on method.

3, delegate method binding event, allows us to specify any element on the page as an element of the listener event, binding only one event handler, binding speed with respect to bind and on is calculated faster.

$ (document). Ready (function() {      $ (
　　　　　　
MouseEnter:function

$ ( This

Mouseout:function
$ ( This



});

jquery Dynamic bound event handler Bind/on/delegate