CODEWITHSUNDEEP
javascriptjquery
Andrew Kilburn
Andrew Kilburn

Reputation: 2251

How to remove the click event from an anchor link?

I have been doing some research into this and so far, all I've been able to find it that you can only remove the event listener. Not the actual event. For example, I have an anchor link which after being clicked once. I wouldn't like the user to be able to click it again. How can I go about doing this?

I have a very simple set up below:

      <script>

            $(document).on('click', '.prevPage', function () {
    alert("In");
    if (parseInt($('.nextPage').attr('rel')) > 2) {
        //TAKE OFF CLICK    
        currentPage -= 1;
        rowsShown = $('.pageSize').val();
        skip = (currentPage * rowsShown) - rowsShown;
        GetMoreData(skip, 2);
    }
});

function RePager(skip, btnClicked) {
    /* ** NEED TO WORK OUT THE INPUT BOX ** */
    if (ReportType() == 2) {
        var FilteredData = $('.BoolFiltered').val();
        var totalPages = GetTotalPages();
        if (totalPages == 0) {
            totalPages = 1;
        }
        var newPrevPage = currentPage - 1;
        var newNextPage = currentPage + 1;
        /*
        1 - First Page 
        2 - Prev Page
        3 - Next Page
        4 - Last Page
        4+ - Ajax filter
        */
        switch (btnClicked) {
            case 1:
                $('.prevPage').attr('rel', 1);
                $('.nextPage').attr('rel', 2);
                $('.lastPage').attr('rel', totalPages);
                $('.pagedisplay').val(currentPage + '/' + totalPages);
                break;
            case 2:
                $('.prevPage').attr('rel', newPrevPage);
                $('.nextPage').attr('rel', newNextPage);
                $('.lastPage').attr('rel', totalPages);
                $('.pagedisplay').val(currentPage + '/' + totalPages);
                //PUT CLICK BACK ON
                break;
            case 3:
                $('.prevPage').attr('rel', newPrevPage);
                $('.nextPage').attr('rel', newNextPage);
                $('.lastPage').attr('rel', totalPages);
                $('.pagedisplay').val(currentPage + '/' + totalPages);
                break;
            case 4:
                $('.prevPage').attr('rel', totalPages - 1);
                $('.nextPage').attr('rel', totalPages);
                $('.lastPage').attr('rel', totalPages);
                $('.pagedisplay').val(totalPages + '/' + totalPages);
                break;
            default:
                currentPage = 1;
                $('.prevPage').attr('rel', 1);
                $('.nextPage').attr('rel', 2);
                $('.lastPage').attr('rel', totalPages);
                $('.pagedisplay').val(currentPage + '/' + totalPages);

        }

    }
}


        </script>

<body>
    <a class="prevPage">WORK</a>
</body>

Edit: I will go into more specifics. After the user has clicked on the event, I would like to disable the click. After the function has ended, I would then like to allow the user to click the button again. I could always just change the class name but I don't want to do this, I'd rather find a more elegant solution.

EDIT 2: Check above code for actual issue

Upvotes: 0

Views: 4133

Answers (4)

void
void

Reputation: 36703

$(document).on('click', '.test', function (e) {
      e.preventDefault();
      $(this).off("click");
});

Use .off

$(document).off('click', '.test');

Upvotes: 0

Jai
Jai

Reputation: 74738

You can use .one() instead: 

$(document).one('click', '.test', function(e) {
  $('pre').append(e.type+'ed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test">WORK</a>
<br>
<pre></pre>

As per your edits:

You can use .on() to bind the event and use .off() to unbind it. something like this: 

function bindClick(e) {
  $('pre').append(e.type + 'ed');
  $(document).off('click', '.test', bindClick); // unbound click
  setTimeout(function() {
    $(document).on('click', '.test', bindClick); // bound again after 2 sec
  }, 2000);
}

$(document).on('click', '.test', bindClick); // bound click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test">WORK</a>
<br>
<pre></pre>

Upvotes: 6

wjvander
wjvander

Reputation: 601

Easiest would be to use CSS instead of trying to remove listeners and what-not.

jQuery has a .addClass() function that you can use.

Example CSS

.disabled {
   pointer-events: none;
   cursor: default;
}

Then your script code

$(document).ready(function () {
   $(".test").click(function () {
     $(this).addClass("disabled");
   });
});

That way you can easily do .removeClass() as well

Upvotes: 4

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You need to wrap it in dom ready initially. Otherwise the script will run before the element is getting ready on the dom. Then you can use event.preventDefault() to disable the normal click.

 $(document).ready(function () {
   $(".test").click(function (e) {
     e.preventDefault();
   });
 });

Upvotes: 3

Related Questions