Wenn Sie auf ein Popover klicken, blättern Sie zurück zum Anfang der Seite [Bootstrap and Django]
Lesezeit: 3 Minuten
Ich verwende Bootstrap mit Django und bisher hat alles funktioniert. Ich versuche jedoch, die Popover-Funktionalität zu verwenden, und ich stoße immer wieder auf ein Problem. Jedes Mal, wenn Sie auf mein Popover klicken, scrollt die Seite zurück nach oben … ABER das Popover wird angezeigt. hier ist mein Code:
//////////<..... a lot more HTML ....>//////////
<div class="bs-docs-example">
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" id="testpop" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
{% endblock %}
{% block js %}
{{ block.super }}
{% bootstrap_javascript_tag "modal" %}
{% bootstrap_javascript_tag "alert" %}
{% bootstrap_javascript_tag "tooltip" %}
{% bootstrap_javascript_tag "popover" %}
<script type="text/javascript">
$("#testpop").popover();
</script>
Danke vielmals!
Sie müssen die Standardereignisaktion in der verhindern popover() Handler. Z.B $('#testpop').click(function(e) { e.preventDefault(); ... });
– N Rohler
25. September 2012 um 20:29 Uhr
Dies ist ein Duplikat von stackoverflow.com/questions/13755033/…. Obwohl diese Frage zuerst gestellt wurde, scheint diese eine vollständigere Antwort zu haben.
– Kelan
31. Dezember 2012 um 21:29 Uhr
Sie können das lösen, indem Sie die Standardaktion des Ankerelements verhindern:
Leider hat keine der Lösungen in dieser Antwort für mich funktioniert. Popover scrollt nicht nur die Seite für mich, sondern beendet auch das Verhalten anderer Anker sowie den jquery-ui datepicker. 🙁 Irgendwelche Ideen?
– wird824
21. Februar 2014 um 16:19 Uhr
Wie oben erwähnt, können Sie diese verwandte Antwort überprüfen: stackoverflow.com/a/13759775/931277 Sie schlagen vor, ein div anstelle eines Ankers zu verwenden, was hilfreich sein kann. In Ihrem Fall klingt es so, als ob der Selektor, den Sie zum Hinzufügen des Popover-Verhaltens verwenden, möglicherweise nicht spezifisch genug ist. Es lohnt sich wahrscheinlich, eine neue Frage speziell für Ihren Fall zu öffnen und Code zu posten.
– dokkaebi
21. Februar 2014 um 18:39 Uhr
Andere Probleme mit Popover gefunden und behoben, mit Ausnahme des letzten bezüglich des automatischen Scrollens zur Seite. Ich habe jede einzelne Lösung, die in SO gefunden wurde, sowie einige andere ohne Erfolg ausprobiert. Muss eine neue Frage posten 🙁
– wird824
25. Februar 2014 um 20:30 Uhr
Sie können dem Anker-Tag href=”https://stackoverflow.com/questions/12590523/javascript://” hinzufügen.
So einfach! Und keine Änderung der URL im Browser.
– MaxP
16. Mai 2017 um 17:33 Uhr
Entferne das href=”#” Tag, es sollte funktionieren.
Nur als Hinweis, laut der Bootstrap-Dokumentation sollten Sie dies nicht tun, wenn Sie ein verschließbares Popover verwenden.
– Tom Carrick
23. Dezember 2014 um 15:39 Uhr
@Knyght – Mit Version 3 können Sie die entfernen href Sie müssen jedoch einige andere Attribute hinzufügen. Siehe die Dokumente für Beim nächsten Klick schließen.
– Toni
4. September 2015 um 12:25 Uhr
Dadurch wurde das Popover für mich vollständig deaktiviert (Bootstrap 4)
– guero64
22. August 2017 um 13:58 Uhr
Dies kann auch durch ein Element mit verursacht werden autofocus=on im Popover (getestet in Chrome)
Christian Barto
Sie können ersetzen href="#..." mit data-target="#..."
Luiz Feijão Veronesi
Ich verwende Bootstrap 2.3.2
Es geht nicht ums Klicken. Selbst wenn ich show popover programmatisch aufrufe, scrollt es mich nach oben.
Der Punkt ist die Bootstrap-Tooltip-Show-Funktion. Da ist eine Zeile:
Es wendet den Anzeigeblock beim Abnehmen der Spitze an, um seine Höhe und Breite zu erhalten. Dies ist eine metaphysische Frage! Unsichtbare Elemente haben keine Höhe!! Um dies zu beheben, habe ich diese Zeile kommentiert und hinzugefügt:
$tip.show();
Direkt nach der Zeile, wo es eine Position bekommt:
pos = this.getPosition()
Bei mir hat es funktioniert.
Ahmer Kureishi
Ich bin auf dasselbe Problem mit Bootstrap v3.3.2 gestoßen und habe es gelöst, indem ich Schaltflächen anstelle von Anker-Tags verwendet habe.
Ich ging dann zurück zu Bootstrap-Dokumente und festgestellt, dass alle bis auf eines der dort angegebenen Popover-Beispiele Schaltflächen verwenden – und Überraschung Überraschung – dasjenige, das den Anker verwendet, lässt das href-Attribut aus!
12291600cookie-checkWenn Sie auf ein Popover klicken, blättern Sie zurück zum Anfang der Seite [Bootstrap and Django]yes
Sie müssen die Standardereignisaktion in der verhindern
popover()Handler. Z.B$('#testpop').click(function(e) { e.preventDefault(); ... });– N Rohler
25. September 2012 um 20:29 Uhr
Dies ist ein Duplikat von stackoverflow.com/questions/13755033/…. Obwohl diese Frage zuerst gestellt wurde, scheint diese eine vollständigere Antwort zu haben.
– Kelan
31. Dezember 2012 um 21:29 Uhr