web-dev-qa-db-fra.com

Cliquer sur un popover fait défiler vers le haut de la page [Bootstrap et Django]

J'utilise bootstrap avec Django et jusqu'à présent, tout fonctionne comme prévu. Cependant, j'essaie d'utiliser la fonctionnalité popover et je rencontre toujours un problème. Chaque fois que vous cliquez sur mon popover, la page revient au début ... MAIS le popover apparaît. voici mon 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>

Merci beaucoup!

jquerydjangotwitter-bootstrap
31
abisson

Vous pouvez résoudre ce problème en empêchant l'action par défaut de l'élément d'ancrage:

$('a#testpop').on('click', function(e) {e.preventDefault(); return true;});
39
dokkaebi

Supprimez la balise href = "#" , cela devrait fonctionner.

26
Alvaro Sifuentes Rojas

Vous pouvez ajouter href = "javascript: //" à la balise d'ancrage.

22
Florin Dobre

Cela peut aussi être causé en ayant un élément avec autofocus=on dans le popover (testé en chrome)

2
Peter Ehrlich

Vous pouvez remplacer href="#..." par data-target="#..."

0
Christian Barreto

J'ai rencontré le même problème avec Bootstrap v3.3.2 et je l'ai résolu en utilisant des boutons au lieu de balises d'ancrage. 

Je suis ensuite retourné à Bootstrap docs et j'ai constaté que tous les exemples popover cités ci-dessus utilisent des boutons - et surprise surprise - celui qui utilise l'ancre ne contient pas l'attribut href!

0
Ahmer Kureishi