Is the jquery 'on' function efficient when selector is document

Question

Are there any issues with using Jquery's .on() function as such:

$(document).on("click", "#myDynamicallyLoadedElement", function() {});

vs. something like:

$(".parentElement").on("click", "#myDynamicallyLoadedElement", function() {});

I feel like the $(document) usage would be much more inefficient and could cause performance or other issues with the browser.

Does anyone know if there are any issues with using $(document).on() this way?

You are correct in assuming its inefficient to target the `document` when you have an actual container. — tymeJV, Feb 10 '14 at 22:20
check out http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document — Walter Stabosz, Feb 10 '14 at 22:28

score 0 · Answer 1 · answered Mar 01 '14 at 03:26

You want to narrow it down as much as possible, but avoid repeating yourself, when adding event listeners. Now, there's nothing wrong with $(document) when you actually want to target the whole document, but if not, then you're getting hit by possibly hundreds of events that jQuery must filter — this is a bit inefficient. Rather, it's best to target only the element(s) you want to listen to. For best performance in that example, do this:

$("#myDynamicallyLoadedElement").click(function () {});

Since you used an ID, I assumed there'd be only one of myDynamicallyLoadedElement in the document.

click() is shorthand for on("click", )

score 0 · Answer 2 · answered Mar 01 '14 at 03:30

The two primary reasons to use $(document).on are if you have no idea where you're content is going to be, or if you're defining the event handler prior to the other html being loaded. For most cases neither of these two statements are true, so you should try and be as specific as possible while adhering to the D.R.Y principle.

Is the jquery 'on' function efficient when selector is document

2 Answers2