Einfache jQuery ausblenden/anzeigen funktioniert nicht in IE

Question

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

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

}); 

Ich kann nicht herausfinden, warum. Scheint einfach genug. Mein HTML ist in HAML. Aber es ist einfach zu verstehen, wenn Sie nicht wissen, was HAML ist. Mein HAML lautet:

 #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

Ich glaube nicht, dass OPTION-Elemente Klickereignisse haben. Sie wollen den Click-Handler auf das SELECT-Element befestigen und dann die Option, die gewählt wurde \

(Disclaimer: Luft-kodiert).

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

Answer 2

Es würde helfen, den HTML-Code zu erhalten die aktuelle Seite, sowie ein wenig mehr über das Problem zu wissen.

• Welche Version von IE hat das Problem?
• Ist es nur das Ausblenden/Anzeigen von #createGallery, das nicht funktioniert, oder wird das Klickereignis überhaupt nicht ausgelöst?
• Was gibt alert($("#gallerySelect > option").not("#newGallery").length); oder alert($("#gallerySelect > option").length); zurück?

Answer 3

Alle Ihre Optionselemente haben den gleichen Wert ... Dies ist normalerweise nicht wie dieses Element verwendet wird. Auch wenn Sie Ihr Element sofort ausblenden, können Sie es einfach in Ihrem HAML festlegen (es sei denn, Sie möchten es natürlich nicht von JS-Benutzern sehen). Es würde mehr Sinn machen, wenn Sie etwas nach dem Vorbild der dies tat:

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

}); 

Mit HAML etwas wie folgt aus:

#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