Estoy tratando de mostrar el mensaje de notificación usando popover, está funcionando, pero después de cargar una página, si hago clic en el botón la primera vez, no muestra la ventana emergente después de eso, funciona bien aquí está mi código:
<button type="button" id="bulk_actions_btn" class="btn btn-default has-spinner-two" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="Click any question mark icon to get help and tips with specific tasks"> Apply </button>jquery
$(document).on('click','#bulk_actions_btn',function(){ if(condition){ $('[data-toggle="popover"]').popover(); //here if the condition is true then popover should be display. }else{ //ajax } });Deberías echar un vistazo a los métodos popovers :
Para mostrar el popover necesitas usar:
$('#element').popover('show');En lugar de usar:
$('[data-toggle="popover"]')selector Le sugiero que se dirija directamente a su elemento.
$('#bulk_actions_btn_new') or $(this)Si desea utilizar el atributo de datos para seleccionar elementos, debe utilizar la función de filtro .
Para evitar efectos de parpadeo, puede mostrar el popover solo si está oculto. Si hace clic demasiado rápido en el botón, puede evitar ocultar el popover manejando el evento hide.bs.popover.
El fragmento:
$(document).on('click', '#bulk_actions_btn', function (e) { // // If popover is visible: do nothing // if ($(this).prop('popShown') == undefined) { $(this).prop('popShown', true).popover('show'); } }); $(function () { $('#bulk_actions_btn').on('hide.bs.popover', function (e) { // // on hiding popover stop action // e.preventDefault(); }); }); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" id="bulk_actions_btn" class="btn btn-default has-spinner-two" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="popover335446"> Apply </button>Solo verifica tu condición adentro
$(document).ready(function(){ //Your condition here });debe habilitar popover antes de poder utilizarlo. No están habilitados de forma predeterminada. Entonces, cuando llama al método popover(), en realidad está inicializando el popover. Lo hace en el evento de clic y, por lo tanto, no funciona por primera vez. Debe hacer eso cuando document.ready se active así:
$(document).ready(function(){ $('[data-toggle="popover"]').popover(); });Esto habilitará todos los popovers de arranque en su código