1

He hecho una funcionalidad para poder ocultar un menú por medio de jquery.

La primera parte del código, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intención es que lo haga sin cargarla pagina.

¿Como podría mejorar el código para que no cargase la página?

JQUERY

<script type="text/javascript" >
$(document).ready(function(){


    $('#ocultaropciones').click(function(e){

        var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                            $('#contenidoDerecha').attr('class','col-md-12');
                            $('#menuizquierdo').hide();
                            $('#opcionesListado').html(urlaocultar);
                            e.preventDefault(); 
                        //  $('#ocultaropciones').parents().text(urlaocultar); 


    });
    $('#mostraropciones').click(function(b){
        b.preventDefault(); 
        var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                            $('#menuizquierdo').show();
                            $('#opcionesListado').html(urlamostrar);

    });
})

</script>

El código HTML es demasiado extenso así que pongo lo que creo que os puede ayudar a identificar el problema

<div class="col-md-12">
                        <div class="panel panel-default ">
                            <!-- <div class="panel-heading">
                                <h3 class="panel-title">Panel title</h3>
                            </div> -->
                            <div class="panel-body">


                            <div class="row">
                                <div class="col-md-2" id="menuizquierdo">
                                      <div class="panel panel-default">

                                        <div class="panel-heading">Opciones</div>
                                          <div class="panel-body text-center">
                                           <ul>
                                               <li><a href="">opcion_1</a></li>
                                               <li><a href="">opcion_2</a></li>
                                               <li><a href="">opcion_3</a></li>
                                               <li><a href="">opcion_4</a></li>
                                               <li><a href="">opcion_5</a></li>
                                               <li><a href="">opcion_6</a></li>
                                               <li><a href="">opcion_7</a></li>
                                               <li><a href="">opcion_8</a></li>
                                               <li><a href="">opcion_9</a></li>
                                               <li><a href="">opcion_10</a></li>
                                               <li><a href="">opcion_11</a></li>
                                               <li><a href="">opcion_12</a></li>
                                               <li><a href="">opcion_13</a></li>
                                               <li><a href="">opcion_14</a></li>
                                               <li><a href="">opcion_15</a></li>
                                               <li><a href="">opcion_16</a></li>
                                               <li><a href="">opcion_17</a></li>
                                               <li><a href="">opcion_18</a></li>
                                               <li><a href="">opcion_19</a></li>
                                               <li><a href="">opcion_20</a></li>
                                         </ul>
                                        </div>


                                    </div>

                                </div>


                                <div class="col-md-10" id="contenidoDerecha">

  <div id="espacio100"></div>

<div class="col-md-2" id="opcionesListado">
                        <a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>

                    </div>

3 respuestas 3

1

Hay algo que ocurre en el jQuery, y es que el botón con id "mostraropciones" no está cargado en el documento, el cual hace que no se ejecute el código.

Cambia el código por el siguiente:

$(document).ready(function() {
  $('body').on("click", "#ocultaropciones", function(e) {
    var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
    $('#contenidoDerecha').attr('class', 'col-md-12');
    $('#menuizquierdo').hide();
    $('#opcionesListado').html(urlaocultar);
    e.preventDefault();
  });
  $('body').on("click", "#mostraropciones", function(b) {
    b.preventDefault();
    var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
    $('#menuizquierdo').show();
    $('#opcionesListado').html(urlamostrar);
  });
});

Cuando introduces HTML nuevo, y quieres que jQuery tenga efecto cuando hagas un trigger en ese elemento, usa $("body").on("click", "#elemento", function() {}); (la función la deberás escoger la que necesites por supuesto).

Añado el jsFiddle de tu código funcionando: https://jsfiddle.net/fdf9uspn/2/

Yo añadiría ambos botones en el HTML y simplemente haría un .hide()y .show() dependiendo de cual has echo clic, así te ahorrarías algo de código jQuery.

1
  • 1
    Ya lo habia solucionado de otro modo, pero me viene muy bien saber lo del .on, lo tendré en cuenta para futuros proyectos. Muchas gracias. Commented el 14 oct. 2016 a las 11:03
1

Prueba a cambiar tu JQUERY por este otro

<script type="text/javascript" > 
$(document).ready(function(){


     $('#ocultaropciones').click(function(e){

         var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                             $('#contenidoDerecha').attr('class','col-md-12');
                             $('#menuizquierdo').hide();
                             $('#opcionesListado').html(urlaocultar);
                             return false;
                         //  $('#ocultaropciones').parents().text(urlaocultar); 


     });
     $('#mostraropciones').click(function(b){

         var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                             $('#menuizquierdo').show();
                             $('#opcionesListado').html(urlamostrar);
           return false;

     }); })

 </script>

Aunque el preventDefault() tambien sirve para evitar que se pueda hacer el salto, a mi hay en muchas ocasiones que me ha dado problemas y con el return lo he solucionado

1
  • No funciona, ya lo habia probado anteriormente. No obstante muchas gracias. Commented el 14 oct. 2016 a las 10:56
0

Al final lo solucione.

Primero añadi a mano esta linea debajo de la de ocultar opciones

<a href="" class="btn btn-info hidden" id="mostraropciones" >Mostrar opciones</a>

Y luego cambie un poco el javascript..por este

<script type="text/javascript" >
$(document).ready(function(){


    $('#ocultaropciones').click(function(e){

    //  var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                            $('#contenidoDerecha').attr('class','col-md-12');
                            $('#menuizquierdo').hide();
                            $('#mostraropciones').removeClass('hidden');
                            $('#ocultaropciones').addClass('hidden');

                        //  $('#opcionesListado').html(urlaocultar);
                            e.preventDefault(); 
                        //  $('#ocultaropciones').parents().text(urlaocultar); 


    });
    $('#mostraropciones').click(function(b){
        b.preventDefault(); 
    //  var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                        $('#contenidoDerecha').attr('class','col-md-10');
                            $('#menuizquierdo').show();
                            $('#mostraropciones').addClass('hidden');
                            $('#ocultaropciones').removeClass('hidden');
                        //  $('#opcionesListado').html(urlamostrar);

    });
})

</script>

Cuando intentas interactuar con un resultado de javascript da problemas por eso tienes que tener todos los elementos que vas a usar ya cargados. Muchas gracias a todos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.