单击弹出框会滚动回页面顶部 [Bootstrap 和 Django]答案

【问题标题】：Clicking a popover scrolls back to top of the page [Bootstrap and Django]单击弹出框会滚动回页面顶部 [Bootstrap 和 Django]
【发布时间】：2012-09-17 10:01:15
【问题描述】：

我在 Django 中使用引导程序，到目前为止一切正常。但是，我正在尝试使用弹出框功能，并且一直遇到问题。每当单击我的弹出框时，页面都会滚动回顶部......但弹出框确实出现了。这是我的代码：

//////////<..... 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>

非常感谢！

【问题讨论】：

您需要阻止popover() 处理程序中的默认事件操作。例如。 $('#testpop').click(function(e) { e.preventDefault(); ... });
这是stackoverflow.com/questions/13755033/… 的副本。尽管这个问题是第一个被问到的，但那个问题似乎有一个更完整的答案。

标签： jquery django twitter-bootstrap

【解决方案1】：

您可以将href="#..." 替换为data-target="#..."

【讨论】：

【解决方案2】：

我在使用 Bootstrap v3.3.2 时遇到了同样的问题，并通过使用按钮而不是锚标签来解决它。

然后我回到Bootstrap docs，发现除了其中一个弹出框示例之外，其他所有示例都使用按钮 - 令人惊讶的是 - 使用锚点的示例省略了 href 属性！

【讨论】：

【解决方案3】：

我正在使用 Bootstrap 2.3.2

重点不在于点击。即使我以编程方式调用 show popover，它也会将我滚动到顶部。

重点在于引导工具提示显示功能。那里有一行：

$tip.detach().css({ top: 0, left: 0, display: 'block' })

它在分离提示时应用显示块以获得它的高度和宽度。这是一个形而上学的问题！隐形元素没有高度！！为了解决这个问题，我评论了该行并添加了：

$tip.show();

就在它获得位置的行之后：

pos = this.getPosition()

它对我有用。

【讨论】：

【解决方案4】：

删除 href="#" 标签，它应该可以工作。

【讨论】：

请注意，根据 Bootstrap 文档，如果您正在使用可关闭的弹出框，则不应执行此操作。
@Knyght - 使用版本 3，您可以删除 href，但您需要添加一些其他属性。请参阅Dismiss on next click 的文档。
这对我来说完全禁用了弹出窗口（引导程序 4）

【解决方案5】：

您可以将 href="javascript://" 添加到锚标记。

【讨论】：

如此简单！并且浏览器中的 URL 没有变化。

【解决方案6】：

这也可能是由于在弹出窗口中有一个带有 autofocus=on 的元素（在 chrome 中测试）

【讨论】：

【解决方案7】：

您可以通过阻止锚元素的默认操作来解决这个问题：

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

【讨论】：

遗憾的是，这个答案中的解决方案都不适合我。 Popover 不仅为我滚动页面，还杀死了其他锚点行为以及 jquery-ui 日期选择器。 :( 有什么想法吗？
如上所述，您可以查看此相关答案：stackoverflow.com/a/13759775/931277 他们建议使用 div 而不是锚点，这可能会有所帮助。在您的情况下，听起来您用于添加弹出框行为的选择器可能不够具体。可能值得针对您的案例提出一个新问题，并发布一些代码。
发现并解决了弹出框的其他问题，除了最后一个关于它自动滚动到页面的问题。我尝试了在 SO 中找到的每一个解决方案以及其他一些解决方案，但都无济于事。需要发布一个新问题:(