Question

I am trying to debug a problem and I seemed to have tracked it down but I do not have the technical explanation for why it is happening.

I have a piece of query code that monitors the onclick event on a radio button, and causes a text input(s) to fadein/fadeout according to certain clicks.

What I noticed is even thought his code wasnt changing, I was having to clear my cache to get the code to work properly a lot. I have no clue why but I looked at the code (not written by me):

$(function(){     
  $('.radioSelect_2').click(function(){
    if ($(this).attr("id") == "sub_option_1")
    {
      $('#secondary_sub_1').fadeIn("fast");
      $('#secondary_sub_2').fadeOut("fast");
      $('#secondary_sub_3').fadeOut("fast");
      $('#secondary_sub_4').fadeOut("fast");
      $('#secondary_sub_5').fadeOut("fast");
      $('#secondary_sub_6').fadeOut("fast");
      $('#secondary_sub_7').fadeOut("fast");    
    } 
    else
    {
      $('#secondary_sub_1').fadeOut("fast");
      $('#secondary_sub_2').fadeIn("fast");
      $('#secondary_sub_3').fadeOut("fast");
      $('#secondary_sub_4').fadeOut("fast");
      $('#secondary_sub_5').fadeOut("fast");
      $('#secondary_sub_6').fadeOut("fast");     
      $('#secondary_sub_7').fadeOut("fast");      
    }   
})

And it looks like it is being set up to extend jQuery, so I changed it to

$(document).ready(function() {
  $('.radioSelect_1').click(function(){
    if ($(this).attr("id") == "option_1")
    {
        $('#sub_1').fadeIn("fast");
        $('#sub_2').fadeOut("fast");
        $('#sub_3').fadeOut("fast");
        $('#sub_4').fadeOut("fast");
        $('#sub_5').fadeOut("fast");
        $('#sub_6').fadeOut("fast");
    } 
   else if ($(this).attr("id") == "option_2")
    {
      $('#sub_1').fadeOut("fast");
      $('#sub_2').fadeIn("fast");
      $('#sub_3').fadeOut("fast");
      $('#sub_4').fadeOut("fast");
      $('#sub_5').fadeOut("fast");
      $('#sub_6').fadeOut("fast");    
    }   
});

And it fixes my problem. No more clear cache.etc.
I cannot figure out why, I am hoping guys can.

Answer 1

From jQuery’s docs:

All three of the following syntaxes are equivalent:

• $(document).ready(handler)
• $().ready(handler) (this is not recommended)
• $(handler)

The only thing I can see is that you’re missing a semi-colon in the first code block, but that is most likely a copypasta error…