What is the difference between .on ("click", function () {}) and .click (function () {})?

This is basically how the association for the element is made. .click applies to the current DOM, while .on (using delegation) will continue to be valid for new elements added to the DOM after event association.

Which is better to use, I would say it depends on the case.

Example:

<ul id="afazer">
  <li>Afazer 1</li>
  <li>Afazer 2</li>
  <li>Afazer 3</li>
  <li>Afazer 4</li>
</ul>

Event .click :

$("#afazer li").click(function() {
  $(this).remove();
});

Event .on :

$("#afazer").on("click", "li", function() {
  $(this).remove();
});

Note that I've separated the selector in .on . I'll explain why.

Suppose that after this association, let's do the following:

$("#afazer").append("<li>Afazer 5</li>");

That's where you'll notice the difference.

If the event was associated with .click , job 5 will not obey the click event, and thus will not be removed.

If it was associated via .on , with the separate selector , it will obey.

Credits

The great advantage of the .on() method is to allow delegation for cases where 'selector' is added dynamically (after the code has been run).

In other words: .on() is for descending elements of the first selector even if they are not present at the time the code is read because jQuery will only check the second selector at the time of the event being detected. The .click() only applies to elements already created / existent at the time the code is read.

In this case, using delegation, the syntax is:

$(document).on('click','seletor', function(){ /* ... */ });

I've used document but may be another element, parent of 'seletor' , present at the time .on() is read. So at the time of the mouse click, .on() will look for the delegated element (s), using just one event handler in memory.

In case we want to grab an event from elements that are dynamically created or loaded by ajax, instead of adding .click() each time it is loaded / created, then we can only have .on() for all.

Using .click() will load an event handler per element into memory. Using .on() with delegation is created only one for all elements.

In case you do not use delegation, as in the example question, then they are similar.

Useful links to learn more about event delegation in jQuery:

• Understanding Event Delegation (English)
• Events and Event Delegation (English)
• jQuery .on() (English)

According to documentation $('selector').click(); is only a shortcut to $('seletor').on('click', function() { });

But there is an interesting option of the .on method:

$('div#container').on('click', 'button.alert', function() {
    alert(1);
    $('div#container').append('<button class="alert">Clique-me</button>');
});

This will cause all buttons with class alert to fire the event, including buttons created dynamically within <div id="container"> after script execution. This effect is desirable in several scenarios, for example with content loaded via ajax.

See an example on JSFiddle

$('seletor').click(function (){}); is a shortcut to $('seletor').on('click', function(){}); . Both are equivalent. but the first case has another use that is quite different (clicking), while the second has other uses that are similar (add other types of listeners).

Why use $ (''). on ('click' ...?

Well, using it makes it easy for the developer to know that it's just a change of click for another event that this handler will add the listener to this new event. It is more intuitive .

Another point, which is a matter of personal taste, is that $().click() also serves to activate the action as if the person had clicked and $('').on('click'... will always be to add the listener, and this avoids certain confusion. But as I said, it's a personal matter.

Is there any real problem with using $('seletor').click(function (){}); ?

According to the official documentation in link there is no special alert, such as warning that this code would be deprecated (ie be removed in some future version), logo there is not a strong deterrent in not using it.

I personally prefer to use the other mode. But for historical reasons many tutorials on the internet will use this way here.

In general .click() is actually a shortcut for .on() , with .on() serving any event, both native and custom, and not just the click , so if you happen to be using a dynamic element then .click() may not work and certainly .on() will.

I would like to add one more detail, while ".click" is specific to an event the ".on" can delegate the same function to several events Ex.:

$('selector').on('click mouseleave mouseenter ...', function(){...})

In case it will execute the function for all events described in the first space-separated

method documentation on