title: How to remove the click event from an anchor link?
body: <p>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?</p>
  
  <p>I have a very simple set up below:</p>
  
  <pre><code>      &lt;script&gt;
  
              $(document).on('click', '.prevPage', function () {
      alert("In");
      if (parseInt($('.nextPage').attr('rel')) &gt; 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);
  
          }
  
      }
  }
  
  
          &lt;/script&gt;
  
  &lt;body&gt;
      &lt;a class="prevPage"&gt;WORK&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>EDIT 2: Check above code for actual issue</p>