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

jQuery.Click method reloads the page

提问by Rubén Jiménez

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.

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

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.

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

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

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

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>

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

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

Thanks!

谢谢！

回答by Rory McCrossan

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

您需要使用以下命令停止链接的默认行为preventDefault()：

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

回答by Arun P Johny

you have a problem, instead of classyou have used href

你有问题，而不是class你已经使用href

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

回答by André Dion

You have two issues:

你有两个问题：

You're setting your classes in your hrefattribute instead of class

你在你的href属性中设置你的类而不是class

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

You'll want to stop your browser from following the hrefwhen the link is invoked:

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

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

回答by Tyro Hunter

you have to stop the anchor to do it's default function, loading the page specified its href. This code should do the trick:

你必须停止锚点来做它的默认功能，加载页面指定的href。这段代码应该可以解决问题：

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

回答by Rameez

This can't be, it should work fine. There must be some other issue, please jsfill of your full page.

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

 $(document).ready(function() {

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

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

});

});

See here

看这里

回答by kappatech

Here you can find a fully working example. test here

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

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

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

});

});