jquery events on non-present elements

Question

Is it bad to tie events to ids that aren\'t on the page in certain circumstances (based on PHP)? Will it cause code errors and slowness, or will jQuery automatically ignore them

Answer 1

$("selector") will always return a jquery object that has the list of elements that have matched your selector.

if($("#nonexistantelement")) { /* this always happens*/ }

Whatever is inside your if will always be true, because Objects are truthy. If you really wanted do that then you'd want to say something like:

if($("#nonexistantelement").length > 0) { /* this only happens if you have something */ }

That will tell you if you have actually matched to your elements. But there is no harm in just calling .click(function) on an empty jquery set. Because all jquery does is iterate over the elements matched by the selector and apply that listener. If there are no elements in the set, then it doesn't get applied, and as essentially a noop.

Now if you want to bind callbacks to elements that dont exist yet, then look into .live() and delegate()

Answer 2

When jQuery selector doesn't return any elements, no events are being bound. So you're making no harm by not writing if statement.

This means that internally jQuery binds event handler to all matched elements. When there are none, no handler will get bound to any element. This means: you don't have to check element existence in your code.

Future reference

Whenever you're doing

if ( $('#element') ){
    $('#element').click(function(event) { /* blah blah */ });
}

you should rather save selector results

var result = $('#element');

// check number of elements (zero equals false, anything else equals true)
if (result.length) {
    result.click(function(event) {
        // blah blah
    });
}

result.length is same as result.size().

Binding event handlers to non existing elements

If your interface will generate new elements and you'd like them to have eevent handlers attached when they get added to DOM, then you should use delegate() function. There's also live() function but use the first one whenever possible, because it is a better alternative. There are numerous resources on the net why this is true. This Stackoverflow answer for instance.

Note: As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation.

See jQuery documentation.