Twitter Bootstrap .on ('show', function() {}); non funziona per popover

Question

sto cercando di nascondere tutti gli altri popovers in caso di nuove popover è selezionato nel modo seguente:

mio HTML

a.btn#requests(rel='popover',data-placement='bottom',data-original-title='<b>Requests</b>',data-content='My content goes here') 

mio Javascript

$(function(){ 
    console.log('start'); 
    $('#requests').popover(); 
    $('#messages').popover(); 

    }); 

    //This doesn't work for some reason? 
    $('#requests').on('show', function (e) { 
    console.log('requests'); 
    $('#messages').popover('hide'); 
    }); 

    $('#messages').on('show', function() { 
    console.log('messages'); 
    $('#requests').popover('hide'); 
    }); 

Tuttavia, il mio console.log ('richieste') e console.log ('messaggi'); non viene mai mostrato anche se le richieste e i messaggi popover vengono visualizzati, cosa sto facendo male?

Answer 1

Il plug-in del popover non attiva alcun evento. Nemmeno il plugin tooltip (dal momento che popover estende il tooltip). Controllare this issue (github) per le alternative.

È possibile utilizzare diversi eventi JS in base al proprio trigger. Per il tuo esempio: Demo (jsfiddle)

$(function(){ 
    console.log('start'); 
    $('#requests').popover(); 
    $('#messages').popover(); 

    $('#requests').on('click', function (e) { 
     console.log('requests'); 
     $('#messages').popover('hide'); 
    }); 

    $('#messages').on('click', function() { 
     console.log('messages'); 
     $('#requests').popover('hide'); 
    }); 

}); 

Perché 'click'? Perché il trigger popover predefinito per la versione 2.1.1 è click. Vedere the popover doc (github)

È possibile utilizzare i seguenti eventi:

• trigger: 'click': su click
• trigger: 'hover': display mouseenter e nascondere il mouseleave
• trigger: 'focus': display focus e nascondere il blur
• trigger: 'manual': utilizzare il proprio codice per visualizzare e nascondere comunque

Answer 2

si può facilmente farlo utilizzando la classe e haveing ​​meno e più organazied codici:

$(document).ready(function(){ 

    $('.btn').popover(); 

    $('.btn').on('click', function (e) { 
     $('.btn').not(this).popover('hide'); 
    }); 
}); 

controllare il mio demo here

e se si vuole avere il controllo forma all'interno di personalizzare questo codice:

var mycontent = '<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>' 

$('.btn').popover({ 
     content:mycontent, 
     trigger: 'manual' 
}).click(function(e) { 
    $(this).popover('toggle'); 
    e.stopPropagation(); 
}); 


    $('.btn').on('click', function (e) { 
     $('.btn').not(this).popover('hide'); 
    }); 
}); 

controllo del demo here

Answer 3

Prova questa:

  $(document).on('click', function(e) { 
       if (!$(e.target).is('[data-original-title]')) { 
        $('[data-original-title]').popover('hide'); 
       } 
      }); 

      $(document).on('show.bs.popover', function(e) { 
       $('[data-original-title]').popover('hide'); 
      }); 

Questo imposta un gestore di eventi in tutto il documento e se non è un elemento popover si nasconderà tutti i popovers.

Inoltre, durante l'evento show.bs.popover (attivato prima di aprire un popover) nasconderà tutti gli altri.

Answer 4

Bootstrap ora supporta eventi popover - vedere la sezione Eventi nello official popover docs (e here's the doc changelog).

Esempio:

$('#requests') 
.popover() 
.on('show.bs.popover', function() { console.log('o hai'); }) 
.on('hidden.bs.popover', function() { console.log('ciao'); }); 

Answer 5

E '.on('shown') non .on('show')

Answer 6

Secondo https://getbootstrap.com/docs/3.3/javascript/#popovers-events il nome della manifestazione è

show.bs.popover

ho provato e funziona fine