prevent a link from redirecting to another page

Question

I have a link in my page, and I want to prevent this link to redirect me to the link in the href attribute.

I tried as the following:

$(function(){
    $('#logout-link').click(function(event){
        event.preventDefault();

        $.ajax({
            url     : $(this).attr('href'),
            success : function(data){
                $('#login-loader').hide();
                        location.reload(true);
            },
            error   : function(){
                $('#error-login').replaceWith('<div id="error-login" class="msg fail"><p>Une erreur a été rencontrée lors du deconnexion!</p></div>');
            }
        });


    });
});

But it stills redirect me tho the other page.

How can prevent a link from redirecting to another page ?

Answer 1

Try with return false; instead of event.preventDefault(); But use it after ajax call.

Answer 2

You can modify hyperlink href like below. This method doesn't need any code in JQuery.

<a id="logout-link" href="javascript:void(0);">Logout</a>

Answer 3

Use

 $(document).on("click", '#logout-link', function(event){
        event.preventDefault();
        // your ajax call here 
    });