-2
$(document).on('click', '#mySelector', function() {

});

vs

$('#mySelector').on('click', function() {

});

The first one seems to work when I add #mySelector dynamically, while the second syntax usually gives me trouble when I'm adding dynamically. What is the difference?

user602525
  • 3,126
  • 4
  • 25
  • 40
  • 2
    [jQuery: Direct and delegated events:](http://api.jquery.com/on/#direct-and-delegated-events) `[...]When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.[...]` – t.niese Jan 14 '14 at 21:04
  • The top should work for both static and dynamic elements, but the second only for static elements. – j08691 Jan 14 '14 at 21:05
  • 1
    Questions about the first one is asked 3783 times every day on Stack Overflow, while questions about the second one are asked 2134 every day, in total there should be around 5917 answers every day to those questions explaining the difference. – adeneo Jan 14 '14 at 21:07
  • @adeno I see this has been marked closed and points to a question which is also closed as being "not constructive" nice – user602525 Jan 14 '14 at 21:27

3 Answers3

0

The difference lies in event delegation - in the first example you are adding an event to the document object, and delegating it to all instances of #mySelector, in the second example you are adding an event to all #mySelector objects.

Why would you use first over the second / how will I notice the difference?

The first version is effective if #mySelector is added to the DOM after the page is loaded. For example, perhaps you have a button, when click, adds some HTML tags (say a form), which includes #mySelector. In the first example, since your event is bound to document, any subsequent adds of #mySelector will recognize this callback function. The second function cannot do that, because it only evaluates #mySelector on DOM ready, so any instances that are added after the initial on DOM ready event will NOT have the ability to register that callback function.

acconrad
  • 3,201
  • 1
  • 22
  • 31
0

The difference is the selector

$(document) selects the current document, wich is a global variable that is set without doing anything on your side. So 

$(document).on('click', '#mySelector', function() {
//means :triggers from now on any click on the document where '#mySelector' was hit by click
});

and if you later append '#mySelector' but use

$('#mySelector').on('click', function() {
//means :triggers from now on any click on the '#mySelector' but cant find it! -> so nothing gets triggered after this is executed, because it is executed only one time! 
});
john Smith
  • 17,409
  • 11
  • 76
  • 117
0

The first: 

 $(document).on('click', '#mySelector', function() {

will trigger every time you click on a document, and then run the function on the #mySelector element only when the click happened on a #mySelector.

The second:

$('#mySelector').on('click', function() {

will trigger only when you click directly on the #mySelector object.

For this example, where you are using an id, there isn't much difference, except for one very useful thing. If you use the first syntax, you can remove the #mySelector object and bring it back, or attach it at a later point and it'll start working right away.

With the second syntax, when you remove the #mySelector object, you will also remove the event, which means it has to be remade when you reattach the #mySelector object.

This is even more useful when using a class:

$(document).on('click', '.clickme', function() {

This will automatically have every object with a class of 'clickme' that is inside the document respond to the event. More 'clickme' objects can be added and they will function just fine without having to set up the event everytime.

Damien Black
  • 5,579
  • 18
  • 24