Introduction

jQuery is a compressed and fast JavaScript library which can be used to facilitate event handling, AJAX interactions , HTML Document traversing and animated effects for the website development.

jQuery is a free open-source library which compressed HTML's client-side scripting, which helps the developer to build plug-ins.

There are various methods in jQuery, which allow us to build our needed plug-in and build the functionality as per need.

Today we will talk about few of the jQuery methods.

1. bind() - The bind() method attach 1 or more event handlers for the specific element and define a function to run when the event perform.

For Example- 

2. delegate() - The delegate() method attach 1 or more event handlers for selected elements which are children element of selected elements and defines a function to run when the event perform.

For Example-

3. live() - The live() method is same as the bind method it attach 1 or more event handlers for selected elements and define a function to run when the event perform.

Those event handlers which associated with the live() method will work for both the current element and Future element identical with the selectors(element already created or element will create in future).

For Example-

4. on() - The on() method attach 1 or more event handlers for the specified elements and the child elements of the specified elements.

For Example-

From above definition, we get the basic idea that all the above method associated with the event handlers to perform for the specific outcome.

Now our next concern is what are the major difference in all these methods. Below I provided a simple description of each method, which define the major difference between them and which one is better.

The .bind() method is only associate with the currently selected elements. This method attaching the event directly to the document. It will act to check all the common specific element and then perform the events.

1. It doesn't perform for those elements which are added dynamically which matches the same selector. In short, bind() method is only performed to the items which are currently selected.

2. bind() method also have performance issues on document load or page load.

3. bind() method also have performance issues when we call large sections.

.live() method attach the event handler to the root level document include the selected selector and event data. live() method directly execute to a selector or element. It does not work like chaining method as like delegate() method.

1. live() method have the chaining issue. It's not properly performed with the element chaining.

2. Sometimes live() method perform very slowly, so the main demerit of poor performance on large web documents.

3. This method is put down(deprecated) as from jQuery 1.7. So we have to avoid this method in upgraded jQuery version.

    

.delegate() method behaves as similar as live method behave. This method is very powerful because it approaches directly to the element or tag.

Instead of attaching directly to the selector or event detail of the document, we can anchor the event to the selected element.

.on() method is upgraded version of all the above method(bind, live and delegate). All the 3 methods are emerging in a single method. This method attaches the event handler to 1 or more events to the choose elements. Since jQuery 1.7 version deprecated this above method, then on() method introduce.

It provides all the good features of .delegate() method, and it also provides support for the .bind() method in case of any need.

In the End

So this is the complete overview about the .bind(), .live(), .delegate() and .on() method. Now you can understand if we are using upgraded jQuery file, then we have to use .on() method.