1

El problema que estoy teniendo es que al crearse el popover mediante Jquery se crea un botón para luego poder ocultar el popover. Al hacerle click, el popover no se me cierra y no se si es porque no reconoce el popover o por si la acción está mal programada. En la consola no me sale absolutamente ningún error.

$('[data-toggle="popover"]').popover({
  html: true,
  content: `
            <div class="container mt-2 d-flex justify-content-end">
                <button class="btn" id="btnClose"><img src="imagenes/borrar.png"/></button>
            </div>
            <table class = "table">
                <thead class = "thead-dark">
                    <tr>
                        <th scope = "col">Siendo Usado</th>
                        <th scope = "col">Frecuencia</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Programación</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        `
}).click(function(e) {
  $(this).popover('toggle');
  e.preventDefault();
});


//ACION DEL BOTON PARA OCULTAR AL POPOVER
$('#btnClose').click(function(e) {
  $('.[data-toggle="popover"]').popover('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

introducir la descripción de la imagen aquí

1 respuesta 1

1

Prueba esto por favor:

$(document).on('click','#btnClose',function(e) {
  $('[data-toggle="popover"]').popover('hide');
});

No se muy bien como funciona ese plugin, pero por lo que veo en el código, se está generando todo ese contenido HTML que luego se inserta en el lugar adecuado.

Si es así, fijate que el boton se genera de forma dinámica. Lo que en esencia ocurre es que ese contenido (y tu boton entre el) no se encuentra en el DOM al momento de la carga de la página. Sin embargo en tu código js se define un evento sobre un boton (botón que aún no existe en el DOM). Lo que hace jQuery es enlazar/crear un evento sobre un botón que aún no existe. Por ello, tienes que decirle a jQuery algo así como "enlaza este evento de tipo click sobre el boton con id "btnClose" esté o no en el DOM desde el principio". Eso lo puedes hacer con la función "on" sobre un elemento que ya exista en el DOM.

3
  • Realizando ese codigo me sale un error en consola que dice: Syntax error, unrecognized expression: .[data-toggle="popover"] el 13 abr. 2019 a las 13:43
  • He editado la respuesta. Quita también el punto del principio del selector. Creo que es por eso.
    – cooper
    el 13 abr. 2019 a las 13:51
  • @RodrigoGonzalezArias te ha funcionado??
    – cooper
    el 13 abr. 2019 a las 14:01

Tu Respuesta

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

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