IEで単純なjQueryの非表示/表示が機能しない

Question

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

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

}); 

私は理由を理解できません。十分に簡単だと思われる。私のHTMLはHAMLにあります。しかし、HAMLが何であるか分からなければ、理解しやすいです。私のHAMLは次のように読んでいます：

 #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

私はOPTION要素にクリックイベントがないと思います。あなたは、SELECT要素にクリックハンドラを添付して、選ばれたオプションをチェックしたいと思う\

（免責事項：エア・コード化された）。

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

Answer 2

それはのためのHTMLを取得するために役立つだろう現在のページだけでなく、問題についてもう少し知ることができます。

• どのバージョンのIEに問題がありますか？
• #createGAlleryが機能していないか、またはクリックイベントが発生していないだけですか？
• alert($("#gallerySelect > option").not("#newGallery").length);またはalert($("#gallerySelect > option").length);は何を返しますか？

Answer 3

すべてのオプション要素は同じ値を持っています...これは通常、この要素の使用方法ではありません。また、バットからあなたの要素を隠すつもりならば、HAMLでそれをそのまま設定することができます（もちろん、非JSユーザにデフォルトでそれを見せない限り）。あなたはこの線に沿って何かをした場合は、より理にかなって：

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

}); 

HAMLではこのような何か：

#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