Twitter Bootstrap .on ('show', function() {}); Nie pracuje dla popover

Question

próbuję ukryć wszystkie inne popovers kiedy nowy popover wybiera się w następujący sposób:

Moje HTML

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

My 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'); 
    }); 

Jednak moja console.log ("żądania") i console.log ("wiadomości"); nigdy się nie wyświetla, mimo że pojawiają się prośby i wiadomości, co robię źle?

Answer 1

Wtyczka popover nie uruchamia żadnego zdarzenia. Wtyczka narzędzia nie działa (ponieważ popover rozszerza etykietę narzędzia). Sprawdź alternatywy dla this issue (github).

Możesz używać różnych zdarzeń JS w zależności od swojej trigger. Na swoim przykładzie: 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'); 
    }); 

}); 

Why 'click'? Ponieważ domyślnym wyzwalaczem popover dla wersji 2.1.1 jest click. Zobacz the popover doc (github)

można użyć następujących wydarzeń:

• trigger: 'click': na click
• trigger: 'hover': wyświetlacz na mouseenter i ukryć na mouseleave
• trigger: 'focus': wyświetlacz na focus i ukryć na blur
• trigger: 'manual': użyj własnego kodu, aby wyświetlić i ukryć mimo to

Answer 2

łatwo można to zrobić za pomocą klasę i haveing ​​mniej i bardziej organazied kodów:

$(document).ready(function(){ 

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

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

sprawdź mój demo here

a jeśli chcesz mieć kontrolę formularz wewnątrz dostosować ten kod:

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'); 
    }); 
}); 

Sprawdź demo here

Answer 3

Spróbuj tego:

  $(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'); 
      }); 

Ustawia obsługi zdarzeń na całego dokumentu, a jeśli to nie jest elementem popover będzie ukryć wszystkie popovers.

Ponadto, w przypadku zdarzenia show.bs.popover (uruchomionego przed otwarciem okna) ukryje wszystkie pozostałe.

Answer 4

Bootstrap obsługuje teraz zdarzenia popover - patrz sekcja Wydarzenia w official popover docs (i here's the doc changelog).

Przykład:

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

Answer 5

To .on('shown') nie .on('show')

Answer 6

Według https://getbootstrap.com/docs/3.3/javascript/#popovers-events nazwa imprezy jest

show.bs.popover

spróbowałem i to działa dobrze