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

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). :)