jQuery on() method - which way to use is better for performance?

Question

Is it better to attach the on() event to the document or a closer parent?

Note: Initially this question had another aspect and a different topic. It became obsolete really quickly (typo in the source code)

Could you post the rest of your code, something else is happening to the <ul/> see here for an example of your code working jsfiddle.net/markcoleman/a6vzc — Mark Coleman
– Mark Coleman, Commented Jul 19, 2012 at 11:40

Nick · Accepted Answer · 2012-07-19 12:18:20Z

2

The best key for performance using jQuery is to use an id as the initial identifier. For example:

$('#my_id').on('click', 'tag.my_class', function () {
    ...
});

This allows jQuery to go straight to the container, and then begin trawling from there.

answered Jul 19, 2012 at 12:18

Nick

6,04512 gold badges57 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shreedhar · Accepted Answer · 2012-07-19 12:07:23Z

1

if you bind the "on" event to the closest parent will produce exactly what are you looking for, click function will works fine even if it is appended to document, but in future if you append any elements with class "clickable" will also get binded. so its always good practice to append the "on" event to closest parent rather than whole document.

if you want more specific you can use

$("ul.media-grid").on('click', 'li.clickable', function () {
  alert("works")
});

as it will get the ul with the class "media-grid" and appends the event to the li's with class "clickable"

answered Jul 19, 2012 at 12:07

Shreedhar

5,6903 gold badges24 silver badges27 bronze badges

4 Comments

Horen Over a year ago

is it only good practice or will it improve performance, too?

Shreedhar Over a year ago

@Horen it will also increase the performance mate, because instead of looking whole document and find the li's with the class "clickable", it will look for the ul with the class "media-grid" and do so.

Shreedhar Over a year ago

@Nick sure mate, using id's instead of classes is good practice, because, if you want to perform similar functionality for one or more elements we can use classes, when you need some functionality to be added to one particular element, its good to use id's.

Johann Over a year ago

@shreedhar I mostly agree with you, but I'm confused by the jquery docs about .live(). There it states that one of the downsides of .live() is that "jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents." That implies that .on() doesn't do this.

Collectives™ on Stack Overflow

jQuery on() method - which way to use is better for performance?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related