CODEWITHSUNDEEP
jquery
user6358370
user6358370

Reputation:

Jquery link reloads page

I´m working on this webpage:

http://sociedadmicologicasegoviana.com/

When "Inicia sesión" topbar button is clicked, an hidden div appears, but when you want to close with the image, it reloads the page. Does anyone know why?

The following code is:

HTML:

<div id="login">

<div class="row" id="login-dialog-close">
    <div class="col-xs-12">
        <a href="" id="login-dialog-button-close"><span class="glyphicon glyphicon-remove"></span></a>
    </div>
</div>

<div class="row login-div">
        <div class="col-xs-10 col-xs-offset-1 col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
            <?php echo do_shortcode("[swpm_login_form]"); ?>
        </div>
</div>

JQUERY:

jQuery(document).ready(function($){

$("#login").hide();

$("#login-button").click(function(){
    $("#login").show(500);
});

$("#login-dialog-button-close").click(function(){
    $("#login").hide(500);
});

});

I´m unable to understand this behaviour cause it´s not a button, just a span..

Best regards!

Upvotes: 2

Views: 29

Answers (3)

Luis Angel Meza Perez
Luis Angel Meza Perez

Reputation: 426

Replace:

<a href="" id="login-dialog-button-close">
    <span class="glyphicon glyphicon-remove"></span>
</a>

With this:

<a href="javascript:void(0);" id="login-dialog-button-close">
    <span class="glyphicon glyphicon-remove"></span>
</a>

the problem is because the link's href attribute is empty. Using javascript: void(0); or # in href will resolve the issue.

Upvotes: 0

Puppetmupp
Puppetmupp

Reputation: 69

The span is inside an anchor element, with the href attribute set to "" - this refers to the current site, and will effectively reload the page when clicked.

You should really avoid using anchors when not actually linking to another web page. Instead, you should change it to a div (you can style it to show the pointer with cursor: pointer;).

However, if you really want to use the anchor, you could change the href attribute like so:

And then make sure your javascript returns false:

$("#login-dialog-button-close").click(function(){
    $("#login").hide(500);
    return false;
});

Upvotes: 0

Barmar
Barmar

Reputation: 782693

Since #login-dialog-button-close is a link, clicking on it follows the link. You can prevent this in a few ways:

  • Change href="" to href="#" or href="javascript:void(0)".

  • Call event.preventDefault() in the handler.

    $("#login-dialog-button-close").click(function(e) {
    e.preventDefault();
    $("#login").hide(500);
});

Upvotes: 1

Related Questions