For a medium sized app with a medium amount of javascript (in the way of jQuery), what's the best way to combine the javascript into a single file while also avoiding acting on absent elements?
For example, given the html:
<html>
<head><title>Foobar</title></head>
<body>
<div id='foo'>Bar</div>
</body>
</html>
And the following javascript
$(document).ready(function() {
// This will get bound
$('#foo').click(function() { alert('foobar'); });
// This will not get bound
$('#bar').click(function() { alert('foobar'); });
});
Granted both of the above bindings are relatively innocuous, but for complex behaviors, will attempting to bind to absent elements cause a performance hit? If so, how do you balance keeping your javascript in a single file (to decrease http requests) with maintainable, performant jQuery?