Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

This question already has an answer here:

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!

share|improve this question
1  
The first one is delegated to whatever this is, the other two are regular click events, and are the same. – adeneo Jun 15 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 at 21:56
Maybe this helps: learn.jquery.com/events. – Felix Kling Jun 15 at 21:57
@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 at 21:57
show 1 more comment

marked as duplicate by DSG, Mohammad Adil, adeneo, Joe, Graviton Jun 17 at 3:01

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

4 Answers

up vote 2 down vote accepted

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.

share|improve this answer
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 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) – RVS Jun 15 at 22:01
of course $(button) it's not work. Should be $('button'). – WooCaSh Jun 15 at 22:01
@MitchellLayzell: Event delegation. – elclanrs Jun 15 at 22:01
Awesome thanks a lot everyone for helping clarify that for me, very much appreciated! – Mitchell Layzell Jun 15 at 22:02
show 1 more comment
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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(){});
share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.