jQuery Click Function Different Methods

Question

Hi I have a Ajax call that I'm doing with jQuery and was wondering what is the difference between these methods on selecting an element on click,

FIRST

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

SECOND

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

THIRD

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

My Ajax call selects new data from my database and updates the content on success and changes the data from a data object that I have on the button with an ID, the first on works but the second and third once both only work once and then it fails and I'm am wondering why, thanks a lot in advance!

The first one is delegated to whatever `this` is, the other two are regular click events, and are the same. — adeneo, Jun 15 '13 at 21:55
The latter two are identical. What the first one means depends on what `this` is. It might not mean anything at all... — lonesomeday, Jun 15 '13 at 21:56
@adeneo Thanks, yeah I got that but is there a reason why the second and third ones would fail when updating content on success of the Ajax call after the first button click. — Mitchell Layzell, Jun 15 '13 at 21:57
Yeah, the reason is that the elements doesn't exist when the selector is executed, that's why you need a delegated event handler. — adeneo, Jun 15 '13 at 22:02

isJustMe · Accepted Answer · 2013-06-15T22:03:01.630

4

As per the documentation :

.click()

This method is a shortcut for .on('click', handler)

As you showed in your example they are pretty much the same, however you should use the on() method as it allows you to delegate dinamically .

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

Example :

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

That code will trigger the alert on all the elements that are created within that table, plus if you make AJAX requests and append them to the same table they event handlers will be attached dinamically.

To learn more about how on() delegates check this.

edited Jun 15 '13 at 22:03

answered Jun 15 '13 at 21:57

isJustMe

5,452
2
31
47

Thanks that makes sense but is there a reason why `$('button').on(click, function){ });` doesn't work but `$(this).on('click', 'button', function){ });` does work? – Mitchell Layzell Jun 15 '13 at 22:00
Yes, because the 2nd one attaches the events dinamically, where the fist one only works on created elements (i.e not ajax) – isJustMe Jun 15 '13 at 22:01
of course `$(button)` it's not work. Should be `$('button')`. – WooCaSh Jun 15 '13 at 22:01
@MitchellLayzell: Event delegation. – elclanrs Jun 15 '13 at 22:01
Awesome thanks a lot everyone for helping clarify that for me, very much appreciated! – Mitchell Layzell Jun 15 '13 at 22:02
no problem! if you feel this answer was useful, consider upvoting and accepting so it remains useful for other visitors :) – isJustMe Jun 15 '13 at 22:03

score 0 · Answer 2 · answered Jun 15 '13 at 22:00

From documentation:

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

This method is a shortcut for .on('click', handler)

so it's the same what:

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

Difference between $(this) and $('button') is a scope. In first case you got a handler for element in closure. In second you use selector what mean you attach click event for all button on document.

score 0 · Answer 3 · answered Jun 15 '13 at 22:01

You can use .on() to bind an event to an element that doesn't yet exist. For example when You put ajax response into the div, You may define event earlier, bind it to div, but set trigger to some other element.

For example:

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

score 0 · Answer 4 · answered Jun 15 '13 at 22:06

The reason the first one works & not the other 2 is probably because you are over-writing the event when you over-write the button from after your ajax call; which defeats the whole point of using delegation with on(). Either use the first one or recreate the event handler once your ajax call has completed.

jQuery Click Function Different Methods

4 Answers4