title: Disable click event with jQuery
body: <p>My question is related about disabling links/click events with jQuery, and it's probably easier than it seems to me. I commented the important code to make it easier.</p>
  
  <p>I have the following code in a .js file:</p>
  
  <pre><code>$('.delete-answer').click(function(event) {
      event.preventDefault();
  
      // some actions modifying the tags    
      $('.output').closest('li').remove();
      var idMsg = ...;
      var action = ...;
      var answers = ...;
      $(this).closest('li').children('p').remove();
      $(this).closest('.tr').before('&lt;tr&gt;&lt;td&gt;&lt;div class="output"&gt;Deleting message...&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;');
      $(this).closest('.tr').remove();
  
      // While the servlet is deleting the message, I want to disable the links
      // but I can't, so my problem is just here
  
      // METHOD 1
      //$('a').unbind('click');
  
      // METHOD 2
      //$('a').bind('click', function(e){
      //    e.preventDefault();
      //});
  
      $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
      });
  
      // METHOD 1
      //$('a').bind('click');
  
      // METHOD 2
      //$('a').unbind('click');
  
      $('.output').empty();
      $('.output').append('Message deleted successfully.');
  
  });
  </code></pre>
  
  <p>And In my HTML I have some list items like these:</p>
  
  <pre><code>&lt;li&gt;
      &lt;p class="text"&gt;Some text.&lt;/p&gt;
      &lt;table class="answer-details" style="width: 100%"&gt;
      &lt;tbody&gt;
          &lt;tr class="tr"&gt;
              &lt;td style="width: 50%;"&gt;
                  &lt;div class="msg-modification" display="inline" align="right"&gt;
                      &lt;a id="modify" class="delete-answer" href="#"&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;                               
      &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>As you can see, I tried two methods to disable the click event:</p>
  
  <p><b>Method 1:</b> I tried the following method: <a href="https://stackoverflow.com/questions/3569393/how-to-unbind-all-event-using-jquery">how to unbind all event using jquery </a></p>
  
  <p>Result: It works, unbinding the click event from the anchors with delete-answer class, but:</p>
  
  <p>1) It only deactivate the anchors with delete-answer class. I will prefer to disable <b>all</b> links while the servlet is doing it's stuff.</p>
  
  <p>2) I can't (or I don't know how to) re-enable the links.</p>
  
  <p><b>Method 2:</b> I tried the following method: <a href="https://stackoverflow.com/questions/3788946/dynamically-enable-disable-links-w-jquery">How do I dynamically enable/disable links with jQuery?</a></p>
  
  <p>Result: It works for normal anchors, but not for the anchors with class delete-answer.</p>
  
  <p>Both seem incompatible, so I'd <b>really</b> appreciate some help.</p>
  
  <hr>
  
  <p>Note: also tried to change the class doing this: <code>$('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');</code></p>
  
  <p>It changes the class and leaves the anchors only with delete-disabled class, but when I click them again, they're still deleting the message and I don't know why :/</p>