JQuery 1.3.2 e IE 8 problema con hide () y show ()

StackOverflow https://stackoverflow.com/questions/2345685

Pregunta

¿Alguien puede decirme por qué el siguiente ejemplo funciona en Firefox pero no en IE 8? Solo content_1 funciona correcto en IE 8.

Thx Vijey.

<script type="text/javascript">

$(function(){
    $("#sortable").sortable({handle: '#dragable'});
});


$(function(){

   var v;

  $('div[id^="content_"]').hover(

        function () {

        v = $(this).attr('id');
            $('#'+v+' #menu').show();
            $('#'+v+' #dragable').show();
        },
        function () {
            $('#'+v+' #menu').hide();
            $('#'+v+' #dragable').hide();
        }
    );

});

</script>


<body>

<div id='sortable'>

    <div id='content_1'>

        <div id='menu' style='display:none;'>
            <div>edit</div>
            <div>add</div>
            <div>delete</div>
        </div>

        <div id='content'>Content_1</div>

        <div id='dragable' style='display:none;'>[drag]</div>
    </div>




    <div id='content_2'>

        <div id='menu' style='display: none;'>
            <div>edit</div>
            <div>add</div>
            <div>delete</div>
        </div>

        <div id='content'>Content_2</div>

        <div id='dragable' style='display:none;'>[drag]</div>
    </div>





    <div id='content_3'>

        <div id='menu' style='display: none;'>
            <div>edit</div>
            <div>add</div>
            <div>delete</div>
        </div>

        <div id='content'>Content_3</div>

        <div id='dragable' style='display: none;'>[drag]</div>
    </div>

</div>



</body>
¿Fue útil?

Solución

Los ID deben ser únicos dentro de una página (especificación HTML [1]); tienes 2 #menu, #content, etc. cámbalos por ejemplo <div class="menu"> y tu selector a .menu -- eso debería funcionar.

Por cierto, puede simplificar su devolución de llamada de Hover con find [2]:

function () {
    $(this).find('.menu, .dragable').show(); 
}

1: http://www.w3.org/tr/html401/struct/global.html#h-7.5.2
2: http://api.jquery.com/find/

Otros consejos

No puede tener múltiples elementos con la misma identificación, es HTML inválido, las ID deben ser únicas. Los elementos de su menú deben ser una clase en lugar de una identificación, como esta: 

<div id='content_1'>

    <div class='menu' style='display: none;'>
        <div>edit</div>
        <div>add</div>
        <div>delete</div>
    </div>

    <div class='content'>Content_2</div>

    <div class='dragable' style='display:none;'>[drag]</div>
</div>

Y jQuery como este:

$(function(){
  $('div[id^="content_"]').hover(
        function () {
          $(this).find('.menu, .dragable').show();
        },
        function () {
          $(this).find('.menu, .dragable').hide();
        }
    );
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top