CODEWITHSUNDEEP
javascriptjqueryhtml
AdrianSean
AdrianSean

Reputation: 437

Disable anchor link after click event

I have an anchor link and need behavior in that when the user clicks on it i need it to then disable until the page loads again, at which point its re-enabled again (and then disabled again when user clicks, etc)..

Very same behavior as per a submit post button on a form where it can be disabled until it does the post.

I haven't come across an example yet so hoping someone can help.

I have tried e.PreventDefault on the click event but that prevents the link from being clicked on full stop which i don't want. (i need it to be clicked on and THEN disabled)

Sample code..

$(function () {
  $('header.div.nav.ul').first().on("click", function (e) {

        // how do i disable the link?

  });
});

HTML sample.. (am trying to target the link with text 'Blah'

<header class="module module-header">
  <div class="centered">
    <a href="/Open24Redesign/Accounts/Overview/Index" class="logo logo-small">
      <img src="" data-src="" data-src-retina="" alt="logo" style="opacity: 1;">
    </a>
    <nav>
      <ul class="unstyled clearfix">
        <li class="active"><a href="#">blah</a></li>
        <li><a href="">x</a></li>
        <li><a href="">y</a></li>
        <li><a href="">z</a></li>                 
      </ul>
    </nav>
  </div>
</header>

Many thanks

Upvotes: 2

Views: 10369

Answers (5)

Srey Sem
Srey Sem

Reputation: 1

The solutions on this page do not easily allow for multiple links to be setup.

This is a jQuery implementation which works with any element.

Additionally, it will work for any number of links on the same page and is pretty easy to implement.

Choose a class name unlikely to be used.

Just add the class "can_click_once" to any div, anchor, button, etc which you want only to be clicked once.

Insert this Javascript

$(".can_click_once").click(function(e) {
    if($(this).hasClass( "qubux" )) {
        e.preventDefault();
    } else {
        $(this).addClass('qubux');
        //you can also run other stuff you need once
    }
});

Upvotes: 0

1man
1man

Reputation: 5634

My experiment in Chrome shows that the combination of .one() and e.preventDefault(); is not enough for this purpose. The first time you click the link, it does not use the href, but follows the code in your .one('click', function(e) { });. However, if you double-click the anchor tag, it uses the href.

To fix this issue, I would change the anchor tag to a button without href and .one() method, or I would use some modification of the proposed code in Muhammad Saleh's answer:

var clicked = false;
$('#aTagID').on('click', function(){
    event.preventDefault();
    if(clicked === false) {
       clicked = true;
       window.location = "..."; // or some other code.
    }
});

Upvotes: 0

Gary Storey
Gary Storey

Reputation: 1814

You should use one instead of on. You can also simplify your selector a bit:

$('header nav a').one('click', function(e) {
  e.preventDefault();
  // do what you want the first time here
  // it will only get executed once
});

Reference for jquery .one()

Upvotes: 0

Muhammad Saleh
Muhammad Saleh

Reputation: 359

We will create a flag to check if the button has been clicked or not and then if it was clicked we will disable it and if not then it will be clicked

 var clicked = false;
 $('header.div.nav.ul li').first().find('a').on("click", function (e) {
    if(clicked===false){
       clicked=true;
    }else{
       e.preventDefault();
    }
  });

Upvotes: 6

Milind Anantwar
Milind Anantwar

Reputation: 82231

as you want click event to be only executed once, You should rather use .one() instead of .on()

 $('header.div.nav.ul').first().one("click", function (e) {

        // do stuff
});

Upvotes: 2

Related Questions