javascript - jQuery.Click 方法重新加载页面

Question

我正在尝试创建一个 float 的 div，它会在触发按钮时显示。这并不难，但是当我按下按钮时，页面会自动重新加载。我不知道为什么。

我尝试使用 Bootstrap 的 Popover，但由于同样的问题，它没有按预期工作。当弹出窗口被触发时，页面重新加载并且弹出窗口明显消失。

我正在使用 RoR，只是说以防万一，这对找出问题很有用。

我在文档底部有这样的东西:

<a href="#" class="btn btn-small btn-warning" id="example">Show</a>

<script type="text/javascript">
    $(document).ready(function() {
        console.log("Page is loaded.");

        // Custom Popover
        $("#example").click(function() {
            console.log("Showing");
        });
    });
</script>

第一个 console.log 在页面加载时显示就绪函数。当我触发“显示”按钮时，console.log 再次显示在浏览器的控制台中。这没有任何意义。

谢谢!

Answer 1

您需要使用 preventDefault() 停止链接的默认行为:

$("#example").click(function(e) {
    e.preventDefault();
    console.log("Showing");
});