jQuery的Click方法重新加载页面

Question

我试图创建一个浮动的div，当按钮被触发时出现。这并不难，但是当我按下按钮时，页面会自动重新加载。我不知道为什么。

我试着使用Bootstrap的Popover，但由于同样的问题，它没有按预期工作。当Popover被触发时，页面重新加载，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>

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

谢谢！

- Rubén Jiménez

Answer 1

您需要通过使用 preventDefault() 方法来停止链接的默认行为:

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

- Rory McCrossan

Answer 2

你有一个问题，你使用了href而不是class

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

- Arun P Johny

---

抱歉，在我的原始HTML文件中，我已经放置了href。我忘记在上面的示例中添加它。那不是问题。不过很抱歉。 - Rubén Jiménez

Answer 3

你有两个问题：

1. 你在 href 属性中设置了类名，而不是 class。 2. 请将内容翻译成通俗易懂的语言，不要解释，保留 HTML 标签。

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

当链接被调用时，您需要停止浏览器跟随 href：

$("#example").click(function( e ) {
    e.preventDefault(); // don't follow href
    console.log("Showing");
});

- André Dion

Answer 4

您需要停止锚点执行其默认功能，即加载指定href的页面。以下代码应该可以解决问题：

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

- Tyro Hunter

Answer 5

这不可能，它应该正常工作。肯定还有其他问题，请 jsfill 您的整个页面。

 $(document).ready(function() {

  console.log("Page is loaded.");

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

});

点击这里查看

- Rameez

Answer 6

在这里，您可以找到一个完全可用的示例。 测试这里

$(document).ready(function()
{
   console.log("Page is loaded.");

   $("#example").click(function(e) 
   {
      e.preventDefault();
      alert("works");
   });

});

- kappatech