The jquery on () method binds multiple selectors and events.

This article describes how to bind multiple selectors and events to the jquery on () method. I hope some methods will be helpful to you.

On (events, [selector], [data], fn)

• Events: one or more event types and optional namespaces separated by spaces, such as "click" or "keydown. myPlugin ".
• Selector: the descendant of a selector element used by a selector string to filter trigger events. If the selector is null or omitted, an event is always triggered when it reaches the selected element.
• Data: when an event is triggered, the event. data must be passed to the event processing function.
• Fn: The function executed when the event is triggered. The false value can also be abbreviated as a function, and false is returned.

Such a requirement can be easily understood and implemented using the live () method.

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

After jquery version 1.7, we recommend that you use the on method instead of the previous bind, live, and delegate methods.
How can I write the above sentence if I use on?

In fact, you can see from the live source code that live actually delegates events to doucment.

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... });

In another case, the on () method binds multiple events and can be written as follows:

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, bind multiple selectors using the on () method, and write multiple events as follows:

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