Jak mogę zamknąć bootstrap-popover za pomocą przycisku wewnątrz popover?

Question

Zrobiłem , w którym używam funkcji poppers programu Twitter twitter na ikonie.

<div style="margin-top:200px"> 
    <ul> 
     <li class="in-row"> 
      <a href="#" id="meddelanden" data-title="Meddelanden" data-toggle="clickover" 
      data-placement="right"><i class="icon-globe"></i></a> 
     </li> 
    </ul> 
</div> 

jQuery:

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+ 
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+ 
    '<button id="close-popover" class="btn btn-small btn-primary pull-right">Close please!</button>'; 

$('#meddelanden').popover({animation:true, content:elem, html:true}); 

I nie wydają się być w stanie zamknąć popover z przycisku wewnątrz niego. Próbowałem, aby funkcja kliknięcia jquery na id "close-popover", ale notowanie dzieje. (Nie uwzględniłem mojej próby zamknięcia go wewnątrz jsfiddle)

Jakieś sugestie, jak zamknąć popover za pomocą przycisku wewnątrz popover?

Pozdrawiam, Bill

Answer 1

Spróbuj tego: - http://jsfiddle.net/6hkkk/

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+ 
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+ 
    '<button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(&quot;#meddelanden&quot;).popover(&quot;hide&quot;);">Close please!</button>'; 



$('#meddelanden').popover({animation:true, content:elem, html:true}); 

Answer 2

spróbuj tego:

<input type="button" onclick="$(this).parent().hide();" value="close"> 

przekazując $ (this) swój przedstawieniu przycisk i rodzic odwołuje element przycisk siedzi w

Answer 3

Jak o trochę onclick:

<button onclick="$('#meddelanden').popover('hide');" class="btn btn-small btn-primary pull-right">Close please!</button> 

A co powiesz na funkcję? jonowy:

<button onclick="close_please();" class="btn btn-small btn-primary pull-right">Close please!</button> 

z ...

function close_please() { 
    $('#meddelanden').popover('hide'); 
} 

Albo jak o wiązanie z przycisku po to został stworzony.

$('#meddelanden').popover({animation:true, content:elem, html:true}); 
$('#close-popover').bind('click', function(){ 
    $('#meddelanden').popover('hide'); 
}); 

Answer 4

umieścić to w swoim konstruktorze tytuł popover ...

'<button class="btn btn-danger btn-xs pull-right" 
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon 
glyphicon-remove"></span></button>some text' 

... dostać mały czerwony przycisk na górze 'x' w prawym rogu:

//$('[data-toggle=popover]').popover({title:that string here}) 

Podaję ta sama odpowiedź https://stackoverflow.com/a/23556160/3603692 Mam nadzieję, że to jest dozwolone.

Answer 5

Poprzednie przykłady mają dwie główne wady:

1. przycisk „Zamknij” potrzeb w jakiś sposób, aby zdawać sobie sprawę z ID odwołuje-elementu.
2. Potrzeba dodania zdarzenia "shown.bs.popover", "nasłuchiwania" odbiornika do przycisku zamykania; co również nie jest dobrym rozwiązaniem, ponieważ będziesz wtedy dodawał takiego słuchacza za każdym razem, gdy pojawi się "popover".

Poniżej znajduje się rozwiązanie, które nie ma takich wad.

Domyślnie element "popover" jest wstawiany bezpośrednio po elemencie przywoływanym w DOM (następnie zauważony element referencyjny i popover są natychmiastowymi elementami siostrzanymi). Tak więc, po kliknięciu przycisku "zamknij", możesz po prostu wyszukać jego najbliższy rodzic "div.popover", a następnie odszukać bezpośrednio poprzedzający element rodzeństwa takiego rodzica.

Wystarczy dodać następujący kod w 'onclick' obsługi programu „ścisłej przycisku:

$(this).closest('div.popover').prev().popover('hide'); 

Przykład:

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').prev().popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>'; 

$loginForm.popover({ 
    placement: 'auto left', 
    trigger: 'manual', 
    html: true, 
    title: 'Alert' + genericCloseBtnHtml, 
    content: 'invalid email and/or password' 
}); 

Answer 6

alternatywna bez funkcji wzywając kliknij:

JavaScript

var $popoverParent = $('.popover-parent').popover(); 

//allow to close when close button clicked 
//register listener before popover shown 
$popoverParent.on('shown.bs.popover', function() 
{ 
    //get the actual shown popover 
    var $popover = $(this).data('bs.popover').tip(); 

    //find the close button 
    var $closeButton = $popover.find('.close-btn'); 

    $closeButton.click(function(){ 
     $popoverParent.popover('hide'); 
    }); 
}); 

//show your popover 
$popoverParent.popover('show'); 

Answer 7

Mam wiele przeglądarek na mojej stronie i wszystkie mają ten sam niestandardowy pasek tytułu, więc wszystkie mają ten sam przycisk zamykania. Dlatego nie mogę przekazać identyfikatora do programu obsługi onclick. Zamiast tego postanowiłem poszukać otwartego popover (tylko jeden może być otwarty na raz), a następnie go zamknąć.

function closeMe() { 
    $(document).find('.popoverIsOpen').popover('hide'); 
}