The jquery on () method binds multiple selectors, multiple events

On (EVENTS,[SELECTOR],[DATA],FN)

events: One or more space-delimited event types and optional namespaces, such as "click" or "Keydown.myplugin".
selector: A selector string is used for the descendants of the selector element of the filter's triggering event. If the selector is NULL or omitted, when it reaches the selected element, the event is always triggered.
data: To pass Event.data to the event handler when an event is triggered.
fn: The function to execute when the event is triggered. The value of false can also be abbreviated as a function, returning false.

Such a requirement, if implemented using the live () method is very simple and easy to understand.

The code is as follows	Copy Code
$ (' Nav li, #sb-nav Li, #help li '). Live (' click ', function () { Code ... });

After the 1.7 release, jquery recommends using the on method instead of the previous bind, live, and delegate methods.
How do you write the above sentence if you use on?

In fact, to view the live source, Live is actually commissioned Doucment to do event delegation.

In this way, you can bind the on method to the document.

The code is as follows	Copy Code
$ (document). On (' Click ', ' #header. Fixed-feedback-bn, #sb-sec. Feedback-bn ', function () { Code ... });

There is also a situation in which the on () method binds multiple events, which can be written like this:

The code is as follows	Copy Code
$ ("Table.planning_grid"). On ({ Mouseenter:function () { Handle MouseEnter ... }, Mouseleave:function () { Handle MouseLeave ... }, Click:function () { Handle Click ... } }, "TD");

Finally, you bind multiple selectors with the on () method, and multiple events can be written like this:

The code is as follows	Copy Code
$ (document). On ({ Mouseenter:function () { Handle MouseEnter ... }, Mouseleave:function () { Handle MouseLeave ... }, Click:function () { Handle Click ... } }, ' #header. Fixed-feedback-bn, #sb-sec. feedback-bn ');

Related articles