What could possibly cause JQuery's selector to break?

Question

I am trying to get an element using JQuery's selector, but it does not find it even though the element actually exists. Moreover, I can actually find the element using getElementById.

For example:

$('#outputDiv') gives me a null value. But document.getElementById("outputDiv") returns me the Div I was trying to access.

Any idea?

Answer 1

Check that jQuery is actually loaded. Have you tested with Firebug or another debugger? Are javascript errors reported? Do you use another library that uses $ as an alias?

Answer 2

Are you using any other libraries that might overload $ ? I know that e.g. that Prototype does this.

You might want to try issuing a jQuery('#outputDiv') instead to see if it is actually jQuery that you are invoking.

Answer 3

If you're using IE7 the order of when things happen are very important, and selectors don't tend to work for dynamically generated content if the jQuery script is declared beforehand, i.e. in the head element.

A way we got around this was to place the code at the end of the document. As weird as this sounds, it is documented by MS as a bug that's existed for many years.