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

Question

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

Which function is better and why?

What is the purpose of the delegate function?

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

Can anyone explain to me?

Answer 1

Firstly, the third function ( .delegate ) was replaced with .on (jQuery 1.7 onwards), so I would not use this.

The second method will start the complex selector ".dropdown-menu.show_opt_menu", which is (relatively) expensive since it first gets all .show_opt_menu and then looks at which parents have .dropdown-menu . Then it binds one event for each element. This is (relatively) expensive since you use a slow query and then bind potentially many events.

The first method is the best, since it binds only one event to the .dropdown-menu , then whenever the click event reaches it, it checks the event to see what the original target was. This is a much cheaper option, and since only one event is associated with it is much more effective.

---

Summary: # 1 is the best, # 2 is usually done, but worse, # 3 is deprecated.

You probably won’t notice the difference in performance, but in any case, you should pay attention to the fact that this is good practice. At some point, you may have to worry about performance.

Answer 2

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

The second is a standard event listener for individual elements and causes the connection of several event handlers. Elements must exist during the execution of this code (as opposed to an event).

The latter is the same as the first, but less readable and officially completed on : http://api.jquery.com/delegate/ : "As of jQuery 1.7, .delegate () has been replaced with the .on () method. However, for more of earlier versions, it remains the most effective way to use event delegation

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

Answer 3

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

this function attaches the click event to the .dropdown menu when the target element is .show_opt_menu, which means that dynamically adding another .show_opt_menu does not need to be attached to the 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 a new .show_opt_menu, you need to attach the event separately to this.

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

same goal on

Answer 4

.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 () replaced by .on () method