2010-04-29 13 views
6

An segmentu HTML z div zawierającego formularz zawierający tabelę:Jak ukryć formularza zagnieżdżonych z jQuery pod IE8

<!DOCTYPE html> 
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" --> 
<head> 
    <style type="text/css"> 
    #content{position:relative} 
    table {border-color:#999;border-style:solid} 
    </style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 

<body> 
    <button onclick="javascript:$('.content-panel').toggle();">Toggle</button> 
    <div id="content"> 
     <div class="content-panel"> 
      <form action='' method='post'> 
       <select> 
        <option>a </option> 
       </select> 

       <table> 
        <tr><td>ABCDEF</td></tr> 
       </table> 
      </form> 
     </div> 
    </div> 
</body> 
</html> 

przycisk przełączania powinien ukryć formularz i jego zagnieżdżonej tabeli, ale nie robi tak pod IE8. (wersja 8.0.60001) Zawartość formularza zostaje ukryta, ale krawędź stołu nadal się wyświetla i zachowuje swój rozmiar. Jest związany z trybem standardowym; znika w trybie dziwactwa.

Czy ktoś ma obejście tego problemu?

Ta strona przykładowa została zmniejszona o tyle, o ile mogę ją zmniejszyć. Jeśli usunę zaznaczenie lub którykolwiek z elementów div, problem zniknie. Wybór musi być obecny, a tabela musi być zagnieżdżona w formularzu, ponieważ będzie zawierała elementy formularza.

Sama strona jest pod adresem: http://dev.rdbhost.com/rdbadmin/mainProbDemo.html

Zamieściłem ten problem wcześniej z nadmiernie uproszczonym przykładzie, który nie był powtarzalny. Dziękuję, jeśli na to spojrzałeś.

+0

można udostępnić tę jsfiddle linku? – rahul

+0

Nie jest zaskakujące, że Twój błąd jest [nie może być odtwarzany] (http://jsbin.com/ifaxe4). Naprawdę powinieneś zamieścić link do strony. – Kobi

+0

W rzeczywistości jest on odtwarzalny, jeśli klikniesz "edytuj", a następnie ponownie wyświetl podgląd ... ale wydaje się, że jest to tylko problem z jsbin. Nie mogłem odtworzyć problemu z pliku HTML na moim komputerze. Tak czy inaczej, dlaczego nie po prostu ukryć div za pomocą CSS? – Mottie

Odpowiedz

1

Dlaczego Twoja procedura obsługi onclick zawiera javascript: deklarację schematu?

<button onclick="$('.content-panel').toggle();">Toggle</button> 
+0

Cóż, dla odróżnienia języka od wszystkich * innych * czasów językowych w przeglądarce, oczywiście. Czasami mój kod jest paranoiczny. Czasami nie jest wystarczająco paranoidalny. – Rdbhost

+0

Mój błąd ... nie widziałem nikogo, kto używa VBScript lub podobnego od dłuższego czasu. Czy próbowałeś/aś wziąć udział w zajęciach na div? W ten sposób możesz ustawić pewne reguły w swoim CSS, aby kaskadowo przechodziły do ​​tabeli i innych elementów podrzędnych ... – landons

2

http://api.jquery.com/detach/ może pracować dla Ciebie, jeśli tylko ukrywanie nie zadziała - będzie usunąć element z DOM, ale uratować go, aby można było włożyć ją ponownie, jeśli chcesz (za pomocą http://api.jquery.com/append/ lub http://api.jquery.com/appendTo/). Możesz również spróbować ustawić atrybut widoczności css $(".content-panel").css("visibility","hidden"); jako dodatkową miarę (pamiętaj, że będzie to oznaczać, że element nadal zajmuje miejsce, patrz także http://www.w3schools.com/css/pr_class_visibility.asp) (edycja: cofnij z $(".content-panel").css("visibility","visible");). Last but not least, nigdy nie wiadomo - może po prostu używając show(0); i hide(0); działa i przełącza się w jakiś sposób - nie jest prawdopodobne, to znowu myślę, że murphy ma zastosowanie w tym przypadku.

1

Czy można okleić całe elementy formularza dodatkową tabelą? coś takiego:

<!DOCTYPE html> 
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" --> 
<head> 
    <style type="text/css"> 
    #content{position:relative} 
    .inner {border-color:#999;border-style:solid} 
    </style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 

<body> 
    <button type="button" onclick="javascript:$('.content-panel').toggle();">Toggle</button> 
    <div id="content"> 
     <div class="content-panel"> 
      <form action='' method='post'> 
       <table> 
        <tr> 
         <td> 
          <select> 
           <option>a </option> 
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="inner"> 
           <tr><td>ABCDEF</td></tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </form> 
     </div> 
    </div> 
</body> 
</html> 

Albo po prostu dodając wszystkie elementy w formie do stołu mieć:

<form action='' method='post'> 
      <table> 
       <tr> 
        <td> 
         <select> 
          <option>a </option> 
         </select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         ABCDEF 
        </td> 
       </tr> 
      </table> 
    </form> 
Powiązane problemy