On Functions in jQuery 1.9.1

Sachin Kalia
11y
4.5k
0
0

Article

.on()

.on( events [, selector ] [, data ], handler(eventObject) )

As I learn more about jQuery function every day, I have looked into functions to help perform some operations during runtime introduced as ".on ()".

This method provides a way to attach delegated event handlers to the document element of a page, that simplifies the use of event handlers when content is dynamically added to a page.

It takes a few parameters to show it functionality; the code segment I've used here takes 3 parameters:

The event parameters can also accept a space-separated list of event type names, like click, dblclick and mouseover as depicted here:

To avail yourself of this feature you must download jquery-1.7+.js whilst I have used jquery-1.9.1.js. Next it is necessary to add it into your script folder of your solution .You can have a reference of this file from the solution I attached.

In the following I've demonstrated in the .on () function, I added a list of elements in the unordered list element and bound the dblclick event handler at runtime for selector elements. The main objective is to write this article is to discover how event handlers bind at runtime on selector elements.

There are a few list elements under the unordered list having the class name "list" along with an input type button having id="Csharp".

After adding the required .js file I've appended a few lines to show how this function works.

This is only for how multiple events work simentanously. Later I'd remove two of them and will keep dblclick for demonstration purposes.

When you click F5, the output is like the image shown here:

Try to "dblclick" on any given element, there won't be any alert message until you click on the "Add" button.

As soon as you click on the Add button the .on() will be bound to all the selector elements of the DOM with the list element named "C-Sharpcorner".