What is the difference between jquery on with / without selector parameter and jquery delegate?

Question

I am using jquery 1.10. I want to know what the difference is between these three functions.

Which function is better and why?

What is the purpose of the del

Answer 1

.delegate()

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.

.delegate() has been superseded by the .on() method

Answer 2

First off, the third function (.delegate) has been superseded by .on (jQuery 1.7 onwards) so I wouldn't use that.

The second method will run the complex selector ".dropdown-menu .show_opt_menu", which is (relatively) expensive as it first gets all .show_opt_menus then looks to see which have parents that are .dropdown-menu. It then binds one event per element. This is (relatively) expensive since you're running a slow query, then binding potentially many events.

The first method is the best, as it binds only one event to .dropdown-menu then whenever a click event bubbles up to it, it checks the event to see what the original target was. This is a much cheaper option, and since there's only one event being bound it's a lot more performant.

---

Summary: #1 is the best, #2 is commonly done but worse, #3 is outdated.

You likely won't notice any performance difference anyway, but it's worth paying attention to anyway because it's good practice. At some point, you may need to concern yourself with performance.

Answer 3

The first is a delegated event handler. It listens for events bubbling up to the .dropdown-menu before deciding to filter the chain of bubbling elements using the supplied selector (i.e. .show_opt_menu). It then applies your function to any matched elements that caused the event. It is the preferred way (especially if you have dynamic content).

The second is a standard event listener on the individual elements and causes multiple event handlers to be connected. The elements must exist at the time this code is run (as opposed to when the event occurs).

The last is the same as the first, but less readable and has been superceded officially by on: http://api.jquery.com/delegate/: "As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation"

Of the first two options, my personal preferences is to always use delegated event handlers as being more efficient. But, as this example is intended for click events, the speed differences between any of the solutions are negligible (unless you can click 50,000 times per second). :)

Answer 4

$(".dropdown-menu").on("click", ".show_opt_menu", function() {
alert("hello");
});

this function attaches click event to .dropdown-menu executes when the target element is .show_opt_menu that means when you dynamically add another .show_opt_menu dont need to attach click function. the parent is responsible for the click action.

$(".dropdown-menu .show_opt_menu").on("click", function() {
alert("hello");
});

this function attaches the click event to .show_opt_menu so when you dynamically add new .show_opt_menu you need to attach event separately to that.

$(".dropdown-menu").delegate(".show_opt_menu", "click", function() {
alert("Delegate");
});

same purpose of on