Question

For the moment, we’re loading site-wide event-listeners from a single common.js file for a Rails project. We’re aware of (most of) the trade-offs involved there, and are just trying to mitigate them. Once our basic architecture takes hold, we may move them off to separate files by controller or by view.

For the moment, the quick question is how we can activate them only when necessary, which begs the mangled, pseudo-zen question:

if an event-listener is declared in a forest when nobody is around to hear it, does it still make a sound?

In other words, if one declares a basic listener (i.e., nothing persistent like .live() or .delegate()) in the JavaScript for a given page, and the target element is not actually present on that given page, does anything really happen, other than the few cycles devoted to evaluating it and checking the DOM for the element? Is it active in memory, looking for that element? Something else? It never seems to throw an error, which is interesting, given that in other contexts a call like that would generate a null/nil/invalid type of error.

For instance:

  $(document).ready(function () {
      $('#element').bind('blur keyup', function);
    }

Assume that #element isn’t present. Does anything really happen? Moreover is it any better to wrap it in a pre-filter like:

  $(document).ready(function () {
    if ($('#element')) {
      $('#element').bind('blur keyup', function);
    }

Or, are the .js interpreters in the browsers smart enough to simply ignore a basic listener declared on an element that’s not present at $(document).ready? Should we just declare the initial, simple form above, and leave it at that, or will checking for the element first somehow save us a few precious resources and/or avoid some hidden errors we’re not seeing? Or is there another angle I’m missing?

Answer 1

JQuery was designed to work with 0+ selected elements.
If no elements were selected, nothing will happen.

Note that you will never get null when using jQuery selector. For example:

$('#IDontExist') // != null
$('#IDontExist').length === 0 // true (it's ajQuery object with 
                              //       zero selected elements).

The docs says:

If no elements match the provided selector, the new jQuery object is “empty”; that is, it contains no elements and has .length property of 0.