Simple jQuery Hide/Show does not work in IE

Question

$(document).ready(function(){  
$('#createGallery').hide();

$("#newGallery").click(function () {
      $("#createGallery").show('slow');
});
$("#gallerySelect > option").not("#newGallery").click(function () {
 $("#createGallery").hide('slow');
});

});

I can't figure out why. Seems easy enough. my HTML is in HAML. But its easy to understand if you don't know what HAML is. My HAML reads :

        #createGallery
          %span{ :style => "color:#1B75BC; font-size: 15px;" }
            new gallery
          %br
          %form{ :action => ""}
            %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

        %span{ :style => "color:#1B75BC; font-size: 15px;" }
          gallery

        %form{ :action => ""}
          %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
            %option{ :selected => "selected", :value => "QuickFact" }
              Choose Gallery
            %option{ :value => "QuickFact"}
              My Interior Design
            %option#newGallery{ :value => "QuickFact" }
              New Gallery
        %br

Answer 1

I don't believe that OPTION elements have click events. You'll want to attach the click handler to the SELECT element, and then check the option that was chosen.\

(disclaimer: air-coded)

$(document).ready(function(){
    $('#createGallery').hide();
    $("#gallerySelect").click(function () {
     if (this.options[this.selectedIndex].id == 'newGallery') {
      $("#createGallery").show('slow');
     } else {
      $("#createGallery").hide('slow');
     }
    });
});

Answer 2

It would help to get the HTML for the current page, as well as to know a little more about the problem.

• Which version of IE is having the problem?
• Is it just the hiding / showing of of #createGAllery that isn't working, or is the click event not firing at all?
• What does alert($("#gallerySelect > option").not("#newGallery").length); or alert($("#gallerySelect > option").length); return?

Answer 3

All your option elements have the same value... This is typically not how this element is used. Also, if you are going to hide your element right off the bat, you can just set it as such in your HAML (unless, of course, you want non-JS users to see it by default). It would make more sense if you did something along the lines of this:

$(function(){ 
    $("#gallerySelect").bind('change',function () {
        if($(this).val() == 'newGallery') {
            $("#createGallery").show('slow');   
        } else {
            $("#createGallery").hide('slow');
        }    
    });

});

With HAML something like this:

    #createGallery{:style => "display:none;" }
      %span{ :style => "color:#1B75BC; font-size: 15px;" }
        new gallery
      %br
      %form{ :action => ""}
        %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

    %span{ :style => "color:#1B75BC; font-size: 15px;" }
      gallery

    %form{ :action => ""}
      %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
        %option{ :selected => "selected", :value => "chooseGal" }
          Choose Gallery
        %option{ :value => "designInterior"}
          My Interior Design
        %option{ :value => "newGallery" }
          New Gallery
    %br