jQuery.Click方法重新加载页面 [英] jQuery.Click method reloads the page

问题描述

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

I'm trying to creating a floating div who shows up when a button is triggered. It's not hard, but when i press the button the page automatically reloads. I don't know why.

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

I tried to use Bootstrap's Popover, but it doesn't working as expected due to this same problem. When the popover is triggered, the page reloads and the popover obviously disappear.

我正在使用RoR，只是说如果找出问题会有用。

I'm using RoR, just saying in case that would be useful to find out the problem.

我在文档底部有类似的内容：

I have something like this in document's bottom:

<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 将再次显示在浏览器的控制台中。这没有任何意义。

The first console.log inside ready function is shown when the page loads. When I trigger the button "Show", that console.log is again shown in browser's console. And that doesn't make any sense.

谢谢！

推荐答案

您需要使用 preventDefault（）来停止链接的默认行为：

You need to stop the default behaviour of the link by using preventDefault():

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

这篇关于jQuery.Click方法重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！