Rubén Jiménez Rubén Jiménez - 1 year ago 66
jQuery Question

jQuery.Click method reloads the page

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() {

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


Answer Source

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

$("#example").click(function(e) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download