He estado usando bootstrap para un rato, y me encontré con un problema al intentar agregar un menú desplegable de forma dinámica.

Este es el JavaScript que tengo:

$(document).ready(function() {
 $("#clickHere").click(function(){
        $("#appendHere").html("<div class=\"dropdown\" style=\"display:inline;\"><a id=\"drop1\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"><b class=\"caret\"></b></a><ul class=\"dropdown-menu pull-left\"><li><button>Analyse Now</button></li><li class=\"divider\"></li><li><button>Analyse Later</button></li></ul></div>");
 });

 $('#drop1').on('click', function(e){
  e.stopPropagation();
  $(".dropdown-toggle").dropdown('toggle');
 });
});

Aquí está el código HTML:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu" id="mainMenu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

<button id="clickHere">Click here </button>
<div id="appendHere"></div>

Aquí está el violín
http://jsfiddle.net/szx4Y/83/

El menú desplegable añadir dinámicamente no funciona correctamente. He logrado hacer que funcione en mi código, pero sólo aparece una vez de todos modos.

¿Alguien puede ayudarme?

Gracias!

  • El elemento ancla tiene la clase dropdown-toggle. El selector es válido.
  • Podrías ser más claro?

1 Comentario

  1. 6

    Aquí es un trabajo jsFiddle: http://jsfiddle.net/szx4Y/85/.

    FYI, su jsFiddle no trabajo porque no incluyen el Bootstrap archivo de secuencia de comandos. Así que si usted fuera a hacer cualquier tipo de pruebas hay de que no hubiera funcionado.

    He cambiado el código para llamar a $(".dropdown-toggle").dropdown(); inmediatamente después de agregar el código HTML. Llamando a ese método que la configuración de los elementos de manejar toda la funcionalidad de Bootstrap (haga clic en eventos, etc); no hay ninguna razón para llamar cada vez que usted haga clic en el nuevo elemento.

    Código Correspondiente

    HTML

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu" id="mainMenu">
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
                <li><a tabindex="-1" href="#">Second level link</a></li>
            </ul>
        </li>
    </ul>
    
    <button id="clickHere">Click here </button>
    <div id="appendHere"></div>

    Javascript

    $(document).ready(function() {
        $("#clickHere").click(function(){
                $("#appendHere").html("<div class=\"dropdown\" style=\"display:inline;\"><a id=\"drop1\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"><b class=\"caret\"></b></a><ul class=\"dropdown-menu pull-left\"><li><button>Analyse Now</button></li><li class=\"divider\"></li><li><button>Analyse Later</button></li></ul></div>");
        });
    
        $('.dropdown-toggle').dropdown();
    });

    CSS

    .dropdown-menu {
        float:right;
    }
    • Me gustaría mencionar que no es necesario llamar a $('.dropdown-toggle').dropdown(); a todos y va a funcionar bien. Llamando una vez en el evento listo no hace nada de todos modos porque no hay ningún elemento con clase .dropdown-toggle existe en el momento de la llamada.
    • Puedo agregar contenido HTML a la lista desplegable y utilizarlo como un cuadro de diálogo modal?

Dejar respuesta

Please enter your comment!
Please enter your name here