jQuery.Click method reloads the page

Question

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.

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.

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>

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.

Thanks!

Answer 1

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

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

Answer 2

you have a problem, instead of class you have used href

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