Question

I am interested in knowing when bind function should be used and when delegate function should be used in jquery. Do they not perform the same functionalites? What is the difference?

Answer 1

You use bind (or better yet, on, as bind is deprecated; noted by @Yoshi) when you have a few, existing elements you want to bind event listeners to. You use delegate when the elements you want to handle do not exist yet (e.g. they are dynamically generated and you don’t want to bind handlers to each new element you create, but they have a common parent you can put the delegate on), or when you’re handling events on a lot of elements with a common parent (which is more efficient with a delegate on the parent than with individual handlers on each element).

DOM events bubble up the DOM hierarchy, so when you click on an element onclick handlers for that element are triggered, then handlers on its parent, then its parent, and so on (unless a handler calls stopPropagation on the event, which cancels the further bubbling up. When you use bind/on, you attach your handler to the specific element you want to handle, and it is triggered directly by the target you’ve set it up on; when you use delegate, a jQuery internal handler is attached to the element you specify, and it catches the event on its way up the bubble chain; jQuery then checks if the actual target (which is a child of the element the handler is attached to) matches the selector you’ve specified with the delegation, and if it is it is invoked (it is called as if your actual handler was attached to the target element and not the parent element; noted by @shannon).