¿Cómo evito que se cierre mi menú desplegable al hacer clic dentro?

Estoy usando Bootstrap para crear un menú desplegable para mi sitio web , pero estoy teniendo algunos problemas con él.

En mi sitio web, si hace clic en “Seleccionar poblaciones” aparecerá la ventana emergente (FYI: al hacer clic en “enviar” aparecerán las cosas en él). Y cuando hago clic dentro, siempre se cierra. ¿Cómo puedo evitar que lo haga? Solo quiero que se cierre si hace clic fuera del campo.

Aquí está el código que uso:

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); .dropdown-menu:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .dropdown-menu:after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } 

HTML:

  

‘.dropdown-menu’ atrapa la burbuja. No es necesario capturar elementos dentro del menú desplegable en este caso.

e.stopPropagation () evita que el evento burbujee el árbol DOM, evitando que se notifique a ningún controlador principal del evento.

 $('.dropdown-menu').on('click', function(e) { e.stopPropagation(); });