2015-11-18 13 views
8

Ich habe eine Bootstrap popover bekam, die ein Element mit JS enthält, dass, wenn darauf geklickt, schließt das popover die manuelle Methode verwendet wie auf der Website Bootstrap gezeigt, dhBootstrap popover manuelles Schließen erfordert zwei Klicks wieder zu öffnen

$('#element').popover('hide') 

Es dauert dann jedoch zwei Klicks auf das Element, aus dem das Popover geöffnet wird, um es wieder zu öffnen. Es ist, als ob es immer noch denkt, dass das Popover in der Show ist, und so ist der erste Klick, um es geschlossen zu schließen und der zweite Klick schaltet es dann wieder ein. Kann jemand einen Popover mit JS richtig schließen, um dies zu vermeiden? Ich habe die folgende Geige erstellt, die das Problem veranschaulicht.

http://jsfiddle.net/fxqzn4xd/1/

Dank sehr viel.

Update: Dieses Problem ist kein Duplikat der vorgeschlagenen Frage

Dank wie immer auf die SO-Community für die Führung der Platz ordentlich und relevant. Dies ist jedoch kein Duplikat der vorgeschlagenen Frage. Das Problem in dieser Frage war, dass die Popovers nicht initialisiert wurden bis der erste Klick. Daher öffnete der erste Klick das Popover nicht, initialisierte es jedoch, sodass der zweite und alle nachfolgenden Klicks funktionierten.

Das ist nicht das Problem, das ich gefunden habe. Popover werden beim Laden der Seite initialisiert, sodass mein erster Klick das Popover öffnet. Beim Schließen mit der manuellen Methode .popover ('hide') funktioniert der zweite Klick dann nicht. Jeder zweite Klick funktioniert in meinem Szenario. Dies sind verschiedene Probleme, die durch unterschiedliche Probleme verursacht werden. Das Problem im verknüpften Beitrag besteht darin, Popovers vor dem ersten Klick zu initialisieren, was ich bereits getan habe.

Ich berichtete das Problem, das ich auf dem tbbs-Bootstrap-Projekt auf GitHub gefunden habe und es stellt sich heraus, dass es ein bekannter Bug ist, erstmals in der Version 3.3.5 im Juli gemeldet. Es hatte einen Meilenstein von 3.3.6, aber das rutschte ab (3.3.6 kam kürzlich heraus) und hat jetzt einen Meilenstein von 3.3.7. Alle Einzelheiten über Github hier:

Calling .popover('hide') prevents popover from open on next click #18860

gute Nachricht ist aber, gibt es eine einfache Abhilfe, die angewendet werden kann, während gewartet, es zu 3.3.7 begangen werden. Ich poste es als Lösung.

Update 2 Einverstanden: Dies ist ein Duplikat der neu vorgeschlagenen "Duplikat von" Frage. Sieht so aus, als hätte der Fragesteller das Problem kurz vor mir entdeckt! Ich werde die Frage hier aber so klar wie ich (und andere) nicht finden, dass man zu der Zeit des Blickens so hoffnungsvoll es helfen kann.

+0

gibt es einen Grund, warum Sie nicht die popover Inhalt in dem Bereich Daten- setzen Inhaltsvariable auf der 'show'-Schaltfläche? – Whiplash450

+0

Ja: auf der Geige, nur um es so ähnlich wie die reale Seite zu halten. Auf der realen Seite liegt es daran, dass der Popover-Inhalt html und dynamisch geladenen Inhalt enthält, der mit dem Dateninhalt-Attribut nicht möglich schien. Der JS, der ihn von einem versteckten Element auf der Seite bewegt, wurde ursprünglich von der Bootstrap-Site übernommen, aber der Trick, ihn nach dem Schließen des Popups zu kopieren, bedeutet, dass die Elemente bestehen bleiben und das Popover beim nächsten Öffnen nicht neu erstellt wird. – Kate

+0

Sie können HTML oder dynamischen Inhalt für das Popover entweder angeben, wenn Sie es einrichten oder später von $ ("# popover"). Popover ({ html: true, Inhalt: "dynamische Inhalt hier!" }); Es hilft nicht mit dem Doppelklick-Problem, aber FYI :) – Whiplash450

Antwort

8

Vielen Dank für die Bereitstellung dieser Problemumgehung GitHub Benutzer julesongithub 'gehen. Wenn Sie diese Option auf die gleiche Seite setzen wie ein Popover, das Sie schließen möchten, verwenden Sie .pover ('hide'), um das Problem zu lösen.Im Wesentlichen funktioniert es durch Zurücksetzen der "inState.click" -Variable für das Popover, das die hide-Methode nicht ausführt.

$('body').on('hidden.bs.popover', function (e) { 
    $(e.target).data("bs.popover").inState.click = false; 
}); 
4

Ich habe dies behoben, indem ich die Trigger-Option beim Instanziieren des Popover geändert habe.

$('#element').popover({ trigger: 'manual' }); 

Beachten Sie, dass die mit dieser Option erfordert sowohl zeigen und die popover verstecken.

Source Thread

More popover options

7

Die Abhilfe, die ich verwende, ist die Click() Funktion auf dem Elemente, das das popover, wegen der folgenden Gründe ausgelöst: Sie wollen einfach nur ‚verstecken‘ die popover, wenn es gezeigt, und das Element wird zu zeigen, Das Popover ist auch das Element, um es zu verstecken. Davon abgesehen, klick() wird es verschwinden lassen. Statt

$('#element').popover('hide')

Ich benutze

$('#element').click()

Es funktioniert gut, so weit ...

+0

vielleicht nicht elegant, aber intelligente Workaround, ich mag es –

+0

wow, Ihre Lösung arbeitete wie ein Champion. Danke mein Herr!!! – papfan

Verwandte Themen