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

Question

I usually use it because I learned it was the more correct, the assignment of events as follows:

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

However, I see many developers using the following syntax:

$('seletor').click(function (){});

Although I was told .on is the most recommended, I didn’t quite understand why. So, in practice, what’s the difference of using one or the other?

Answer 1

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

Which is better to use, I would say 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 separated the dial on .on. Now I’ll explain why.

Suppose after this association, we do the following:

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

That’s where you’ll notice the difference.

If the event was associated via .click, afazer 5 will not obey the click event, and so will not be removed.

If you were associated via .on, with the separate selector, he will obey.

Credits

Answer 2

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

In other words: the .on() serves for elements descended from 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 the event is detected. Already the .click() only applies to elements already created/existing at the time the code is read.

In this case, using delegation, the syntax is:

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

I used document but it may be another element, the father of 'seletor', present at the time when the .on() is read. So at the time of mouse click, the .on() will search for the element(s) (s) delegates, using only one Event Handler in memory.

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

Using .click() will be loaded an Event Handler per element in memory. Using .on() with delegation is created only one for all elements.

In case no delegation is used, as in the example of the question, then they are similar.

---

Useful links to learn more about jQuery event delegation:

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

Answer 3

According to the documentation $('selector').click(); is just 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 make all the buttons with class alert trigger the event, inclusive Dynamically created Buttons inside the <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

Answer 4

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

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

Well, using it makes it easier for the developer to know that it’s just switching the click for another event that this Handler will add the Switch for this new event. 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 the $('').on('click'... will always be to add the Ner, and this avoids some confusion. But, as I said, it’s a personal matter.

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

According to the official documentation on http://api.jquery.com/click/ there is no special alert, as if to warn that this code would be deprecated (i.e. be removed in some future version), so there is a strong impediment in not using it.

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

Answer 5

Overall .click() is really a shortcut to .on(), whereas the .on() serves for any event, both the natives and the customized ones and not only the click, this way if by chance you are using a dynamic element the .click() may not work and for sure the .on() going.

Answer 6

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 perform the function for all events described in the first parameter separated by space

metodo documentation on