Friday, July 18, 2014

How to bind/Attache jquery events to selectors or elements

Let us find out the solution of following queries.
Ques: How to attache JQuery events to selectors or elements.
Ques: Explain .bind() vs .live() vs .delegate() vs .on()

This is one of the frequently asked question related to event handling using JQuery.

All these 4 JQuery methods bind(), live(), delegate() & on() are used for attaching events to selectors or elements. But they all are different from each other.

.bind(): This is the easiest and quick method to bind events. But the issue with bind() is that it doesn't work for elements added dynamically that matches the same selector. bind() only attach events to the current elements not future element. Above that it also has performance issues when dealing with a large selection.

.live(): This method overcomes the disadvantage of bind(). It works for dynamically added elements or future elements. Because of its poor performance on large pages, this method is deprecated as of jQuery 1.7 and you should stop using it. Chaining is not properly supported using this method.

.delegate(): The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored and it also supports chaining.

.on(): Since live was deprecated with 1.7, so new method was introduced named ".on()". This method provides all the goodness of previous 3 methods and it brings uniformity for attaching event handlers.

Author: If you like this post or want some modification, kindly write your valuable comments here.


Powered by Code Imagine