jQuery colorbox only binds to 1 element in IE 7 and FF 3.0

Question

I'm just about finished writing a backend for a website in PHP/MySQL/jQuery, but my jQuery colorboxes aren't working in older versions of IE and Firefox.

Steps to reproduce problem: 1. Navigate to http://swstrailers.com/ 2. Scroll to the very bottom and click the Login link in the right corner 3. Leave the fields blank and click the Login button

At this point, the page will reload will an error telling you that the login has failed. There will be a link to login again in the yellow error box as well as the login link at the bottom of the page.

In IE 7 and FF 3.0, only the login link in the yellow error box will popup the colorbox properly; the login link at the bottom of the page will now just load the login form in a new, empty page.

In FF 3.5+ and newer versions of Chrome and Safari, both links popup the colorbox (as is expected).

Does anyone know why this is happening? It seems like jQuery is failing to bind the .colorbox() event to every link on page load.

The file holding the bindings is swstruckbodiesandtrailers.com/_scripts/common.js

Answer 1

id attribute should be unique in one page, jQuery selector $('a#ajaxLogin') returns only the first element. If you want more elements to trigger colorbox, use class attribute ie: <a class="ajaxLogin" [...] and in js: $('a.ajaxLogin')