jQuery Interview Question and Answer With Practices: Part 3

Kindly visit the following first part of jQuery interview questions and answers.

1. jQuery Interview Question and Answers With Practices: Part 1
2. jQuery Interview Questions and Answers With Practices: Part 2

What are the differences between jQuery .bind() vs .live() vs .delegate()?

.bind()

This is the most straight forward binding method. jQuery scans the document for all $('a') elements and binds the alert function to each of their click events.

This is the code segment that I am about to use in my example as shown in the following image.



I've bound the click event on the selector.



Whenever you click on an anchor link it prompts you for the message as shown below.



The bind() method registers the type of event and an event handler directly to the DOM elements. This method basically searches for all the elements and binds the same handler to all the matches found. It doesn't give you a problem if matched elements are less however if there are plenty of matched elements then it raises some efficiency issue to the attach (bind) event handler to all matched elements. It doesn't work for elements added dynamically that match the same selector, because the bind scans the DOM tree and the element must be present in the tree otherwise the handler will not be applied.

After clicking on each link it adds a new link .To verify whether bind() works as expected on a new element, please click on that element.

Kindly refer to the images below:





Note: if you click on the newly added link it doesn't prompt you with an alert message.

.live()

jQuery binds the alert function to the $(document) element, along with "click" and "a" as parameters. Any time an event bubbles up to the document node, it checks to see if the event was a click and if the target element of that event matches the "a" selector. If both are true, the function executes.

The good thing about this code as compared to the .bind() example above is that it is only attaching the event handler once to the document instead of multiple times. This not only is faster, but less wasteful. It also attaches the event to dynamically added elements. Because the real information was registered on the document. it also doesn't support chaining.

After clicking on each link it adds a new link dynamically, that prompts you with an alert.

A quick example of adding elements at runtime is shown below:





Note: if you click on the newly added link it prompts you with an alert message.

.delegate()

This function works in a manner similar to the live() function but instead of attaching event/selector information to the document, you can attach to the element you desire.

Ref: http://api.jquery.com/delegate/

.delegate( selector, eventType, handler )Returns: jQuery

Description

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

• Delegates are faster and/or more efficient than the live function because the delegate is attached to specific root element rather than the document along with the selector or event information.
• You have the option of choosing where to attach the selector or event information.
• Chaining is better than live().
• Note: Chaining is not possible in live().

The following is a very descriptive image of a delegates function and related terminology.



Note: if you click on the newly added link it prompts you with an alert message.



Note: on() is a replacement of all the preceding methods introduced in the jQuery 1.7.1 version. In short I'd say it's an integration of all the preceding methods.

What is an event handler?

I've used the term event handler mostly in the preceding detailed description so I thought to exlain this also. “An Event handler is a code segment attached to an element that executes when an event occurs on that element”.

Kindly have a look at the following image:



Difference between Filter and Find?

As far as my understanding is, both of these perform the action in a similar way.

But filter searches all elements on the basis of the selector value, though find applies only to child elements.

Kindly have a look at a very descriptive image as shown below:



I hope you enjoyed this demonstration.