Clicking a popover scrolls back to top of the page [Bootstrap and Django]

Question

I am using bootstrap with Django and so far everything as worked. However, I am trying to use the popover functionality, and I keep running into a problem. Whenever a click my popover, the page scrolls back to the top... BUT the popover do appear. here is my 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> 

Thanks a lot!

Answer 1

You can solve that by preventing the default action of the anchor element:

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