I have some jQuery code that highlights which radio button is checked by turning on the border of the radio input’s parent element (a div). The radio buttons all have class=’colors’, so my selector is ‘input.colors:checked’.
The problem is that it doesn’t turn on the border when the page loads. For debugging I put the same statement in a hover event, and there it does work.
I thought the jQuery ready() function would run after the document HTML was fully loaded, so why does it appear that the radio button isn’t checked when read() runs, but is checked later when I do the hover??
Should this code work, or am I missing something?
I’m using jQuery 1.3.1 and Firefox 3.0.6.
(also: can I debug this in Firebug??)
Here’s the code:
$(document).ready(function(){ // This one does NOT work. No red border when the page loads. $('input.colors:checked').parent().css({border:'2px solid red'}); $('div.color_choice').hover( function(){ // BUT, this one works! // When I hover over an unrelated div, the red border appears // (this line is here only for debugging) $('input.colors:checked').parent().css({border:'2px solid red'}); }, function(){ } ); ... Update: Ok, sure enough it was a bone-headed mistake. I had another jQuery statement somewhere else that was setting the border back to white on page load. Just burned a couple of hours staring at this. Too many hours at the keyboard today. Thanks for the responses – got me headed in the right direction!
Works for me just fine. I’d guess you’ve got an error somewhere else that’s causing your script to break. Firebug is your friend.