Botones dentro de un enlace.

[zibor]

Hola a todos.
He empezado a utilizar Bootstrap y me encuentro en un punto que no soy capaz de ver el fallo.

Muestro un listado de títulos de documentos que pulsando en alguno me manda a dicho documento.
Por cada titulo que muestra necesito un botón para borrar y otro para editar, siendo mi código el siguiente:

Código:

<div class='panel panel-default'>
        <div class='panel-heading'>Listado de documentos.</div>
        <div class='list-group' id='listDocs'>
                <a class='list-group-item' href='#' id='001'>TITULO 1
                     <button value='Edit' type='button' class='btn btn-default btn-xs pull-right'>
                             <span class='glyphicon glyphicon-pencil'></span>
                     </button>
                     <button value='Delete' type='button' class='btn btn-default btn-xs pull-right'>
                             <span class='glyphicon glyphicon-trash'></span>
                     </button>
                </a>
        </div>
</div>

Para comprobar que pulso el botón edit o delete, le he puesto un "console.log".
Cuando quiero pulsar en cualquiera de los dos botones (edit o delete), hace su función correctamente mostrándome en la consola edit o delete dependiendo del botón pulsado, pero me manda al documento clikeado, ya que dicho boton pulsado esta dentro de un enlace. ¿de que forma podría hacerlo correcto?¿alguien que pueda asesorarme?.

Saludos y gracias.

[PHPeros]

¿Y para qué lo metes en un link?

[zibor]

Con las clases establecidas por Bootstrap si los botones los pongo fuera del enlace no me queda como deseo, que seria tal y como esta en el código anterior. Al ponerlos fuera de la etiqueta "a" dicha etiqueta me ocupa todo el ancho quedándose abajo los botones y bueno, preguntaba por si había alguna forma de poder hacerlo correctamente por Bootstrap sin tener que tocar mucho css.

[jonni09lo]

Lo que pretendes es absurdo... no has probado de esta manera?

Código HTML:

<div class='list-group-item' id='001'>TITULO 1
    <button value='Edit' type='button' class='btn btn-default btn-xs pull-right'>
        <span class='glyphicon glyphicon-pencil'></span>
    </button>
    <button value='Delete' type='button' class='btn btn-default btn-xs pull-right'>
        <span class='glyphicon glyphicon-trash'></span>
    </button>
</div>
 

Si la clase que es importante es list-group-item creo que es mejor usar un div

Saludos